表格的定义

Posted 2023-05-06 清初

表格的定义

两个维护	提出时间
政治意识	2016年1月29日
大局意识	2016年1月29日
核心意识	2016年1月29日
看齐意识	2016年1月29日

Html 教程 表格标签

1. HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

• 表格结构语义标签：
  colspan：跨列
  rowspan：跨行
  cellpadding：单元格内边距
  cellspacing：单元格外边距
  col 和 colgroup 用于便捷定义表格指定列的样式。

2. 标签常用属性

• <table>：
  border=“1” 表格边框的宽度
  bordercolor="#fff" 表格边框的颜色
  cellspacing=“5” 单元格之间的间距
  width=“500” 表格的总宽度
  height=“100” 表格的总高度
  align=“right” 表格整体对齐方式 (参数有 left、center、right)
  bgcolor="#fff" 表格整体的背景色
• <tr>标签的常用属性:
  bgcolor="#fff" 行的颜色
  align=“right” 行内文字的水平对齐方式 (参数有left、center、right)
  valign=“top” 行内文字的垂直对齐方式 (参数有top、middle、bottom)
• <td>、<th> 标签的常用属性:
  width=“500” 单元格的宽度，设置后对当前一列的单元格都有影响
  height=“100” 单元格的高度，设置后对当前一行的单元格都有影响
  bgcolor=“fff” 单元格的背景色
  align=“right” 单元格文字的水平对齐方式 (参数left、center、right)
  rowspan=“3” 合并垂直水平方向的单元格
  colspan=“3” 合并水平方向单元格
  valign=“top” 单元格文字的垂直对齐方式 (参数middle、bottom、top)

3. eg.

<h4 style="text-align:center">课程表</h4>
<table border="1" cellpadding="10" width="100%">
    <tr>
	    <th colspan="2">时间\\日期</th>
	    <th>一</th>
	    <th>二</th>
	    <th>三</th>
	    <th>四</th>
	    <th>五</th>
    </tr>

    <tr>
	    <th rowspan="2">上午</th>
	    <th>9:30-10:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>10:25-11:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
    <th colspan="7"></th>
    </tr>

    <tr>
	    <th rowspan="2">下午</th>
	    <th>14:30-15:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>15:25-16:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>
 </table>