表格

表格

在现实生活中，我们经常需要使用表格来表示一些格式化数据:
课程表、人名单、成绩单....
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格

<body>
    <table border="1" width='50%' align="center">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td rowspan='2'>C2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td colspan='2'>C3</td>
        </tr>
    </table>
</body>

在table中使用tr表示表格中的一行，有几个tr就有几行

在tr中使用td表示一个单元格，有几个td就有几个单元格

rowspan纵向的合并单元格
colspan横向的合并单元格

thead永久表示表格头部
tbody表示表格主体
tfoot永远表示表格底部
th表示头部的单元格

样式

border-spacing:指定边框之间的距离

border-collapse: collapse; 设置边框的合并

tr:nth-child(odd){background-color:#bfa;}设置奇数行颜色

如果表格中没有使用tbody而是直接使用tr,
那么浏览器会自动创建一个tbody, 并且将tr全都放到tbody
tr不是table的子元素

posted @ 2021-12-27 18:08  苏槿年  阅读(129)  评论(0)    收藏  举报