表格
table标签
定义表格的一个区域
border属性
行内样式;
定义表格边框;
tr标签
定义表格的行;
默认平分表格的高度;
- 不支持margin
th标签
定义标题单元格的列;
默认平分表格的宽度;
字体默认加粗和居中;
- 不支持margin
td标签
定义普通单元格的列;
默认平分表格的宽度;
- 不支持margin
示例:
定义一个3行4列的表格
<table border="3">
<!-- 第一行 -->
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
<th>1-5</th>
</tr>
<!-- 第二行 -->
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<!-- 第三行 -->
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
</table>
再给它加个宽高(修饰尽量用CSS)
table{ width: 400px; height: 200px; }
cellpadding属性
table的行内样式;
用于设置表格内文字与边框的间距
<table border="3" cellpadding="20">
cellspacing属性
table的行内样式;
表格内边框与边框之间的宽度;
<table border="3" cellspacing="0">
边框线合并
style="boder-collapse:collapse"
;例如我们CSS加上
table { width: 400px; height: 200px; border-collapse: collapse; }
单元格的合并
colspan属性
行内样式;
用于
<td>
<th>
;是指定单元格横向跨越的列数 ;
<th colspan="2">1-1</th>
然后删除
<th>1-2</th>
rowspan属性
行内样式;
用于
<td>
<th>
;是指定单元格纵向跨越的行数。
<td rowspan="2">2-5</td>
然后删除
<td>3-5</td>
语义化标签
caption标签
用来描述表格的标题;
显示位置:表格头部上方;
默认没有边框线;
<!-- 第一行 --> <caption>我是一个表</caption>
thead标签
表示表格头部;
用于包裹
<th>
的<tr>
;<thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> <th>1-5</th> </tr> </thead>
tbody标签
表示表格的内容(表格的身体);
一般用于包裹描述内容的
<td>
的<tr>
;<tbody> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> <td>2-5</td> </tr> </tbody>
tfoot标签
表示表格的脚注(表格的底部);
一般用于包裹注释的
<td>
的<tr>
;<tfoot> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> <td>3-5</td> </tr> </tfoot>