表格

表格到现在还是较为常用的一种标签,但不是用来布局,常用于处理表格式数据。

<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   作者:孙老师