表格
表格到现在还是较为常用的一种标签,但不是用来布局,常用于处理表格式数据。
<table>
<tr>
<th>表头内的文字</th>
...
</tr>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1. 表格结构
在使用表格进行布局时,我们可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:
2. 表格属性
属性 | 值 | 描述 |
---|---|---|
align | left, center, right | 设置表格的水平对齐方式 |
border | 像素值 | 设置表格的边框, 默认是无边框 ( border = “0” ) |
cellspacing | 像素值 ( 默认是2px ) | 设置单元格与单元格边框之间的空白 |
cellpadding | 像素值 ( 默认是1px ) | 设置单元格边框与其内容之间的空白 |
width | 像素值 | 设置表格的宽度 |
height | 像素值 | 设置表格的高度 |
bgcolor | 英文单词, 十六进制颜色 , rgb等 | 设置表格的背景颜色 |
这些属性可以修改表格的样式,但是目前很多属性已经废弃不用,我们需要用
CSS
控制表格的样式。
3. 合并单元格
rowspan
单元格所占行colspan
单元格所占列
<table bgcolor="orange" cellspacing="20" cellpadding="10" border="5">
<!-- 表格标题 -->
<caption>
课程表
</caption>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
</tr>
<tr>
<td rowspan="2">语文</td>
<td colspan="2">数学</td>
<!-- <td>语文</td> -->
<td>体育</td>
</tr>
<tr>
<!-- <td>语文</td> -->
<td>数学</td>
<td>语文</td>
<td>体育</td>
</tr>
</table>
文档更新时间: 2023-01-10 09:55 作者:孙老师