HTML —— 表格

复习下关于html中的表格。

基本结构：

表格由 table 标签为父标签进行包裹，可以在 table 上添加几种属性。

border ：定义表格的边框。

cellspacing ：间距，指单元格之间的距离，类似盒模型中的 margin。

cellpadding ：补白，指单元格内文字与边框的距离类似盒模型中的 padding 。

其它比如宽高对齐方式，建议使用css进行设置。

tr 标签，表示行。

td 标签，表示单元格。

表格一般都会设置表头，用来定义一列的信息。

表头设置用 tr 包裹，表示一行，th 标签定义表头

<table border="1" align="center" cellspacing="2" cellpadding="10">
    <tr>
        <th>性别</th>
        <th>姓名</th>
        <th>电话</th>
    </tr>
</table>

下面，简单定义一个表格

<table border="1" align="center" cellspacing="2" cellpadding="10">
    <tr>
        <th>性别</th>
        <th>姓名</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>男</td>
        <td>张三</td>
        <td>130000</td>
    </tr>
    <tr>
        <td>男</td>
        <td>李四</td>
        <td>131120</td>
    </tr>
    <tr>
        <td>女</td>
        <td>小红</td>
        <td>4541124</td>
    </tr>
</table>

我们经常需要合并单元格，来显示一些数据

比如，类似下面这样

直接上重点：

rowspan ：合并行

上图其实是第二行的第三个单元格合并了第三行及第四行的第三个单元格。

合并掉几个，就要在相应的行内，删除掉对应的单元格。

代码如下：

<table border="1" align="center" cellspacing="2" cellpadding="10">
    <tr>
        <th>学科</th>
        <th>分数</th>
        <th>总计</th>
    </tr>
    <tr>
        <td>数学</td>
        <td>80</td>
        <td rowspan="3">123</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>95</td>

    </tr>
    <tr>
        <td>英语</td>
        <td>92</td>

    </tr>
</table>

colspan ：合并单元格

效果如下：

此时，第一行的第一个单元格，合并掉了第一行的第二个单元格，同样的，既然合并了，就需要删除掉对应的单元格。

代码如下：

<table border="1" align="center" cellspacing="2" cellpadding="10">
    <tr>
        <td colspan="2">123</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>123</td>
        <td>abc</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>123</td>
        <td>abc</td>
        <td>abc</td>
    </tr>
</table>

　下面，写一个具体的示例作为参考

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            width: 500px;
        }
        td,th{
            border: 1px solid #B2C2E3;
            height: 26px;
            text-align: center;
        }
        th{
            background-color: #DBE3F9;
            font-size: 14px;
        }
        td{
            font-size: 12px;
        }
        .noborder{
            border: 0;
            background-color: #ffffff;
            height: 5px;
        }
        .h{
            color: #E33F06;
        }
        .l{
            color: #0C0C6C;
        }
        .tred{
            color: #FF0000;
        }
        .datebg{
            background-color: #F4F7FC;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th colspan="2">日期</th>
        <th>天气现象</th>
        <th>气温</th>
        <th>风向</th>
        <th>风力</th>
    </tr>
    </thead>
    <tr>
        <td rowspan="2" class="datebg">22日星期五</td>
        <td class="datebg">白天</td>
        <td>晴间多云</td>
        <td class="h">高温7℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    <tr>
        <td class="datebg">夜间</td>
        <td>晴</td>
        <td class="l">低温4℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    <tr>
        <td class="noborder" colspan="7"></td>
    </tr>
    <tr>
        <td rowspan="2" class="tred datebg">23日星期六</td>
        <td class="datebg">白天</td>
        <td>晴间多云</td>
        <td class="h">高温7℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
    <tr>
        <td class="datebg">夜间</td>
        <td>晴</td>
        <td class="l">低温4℃</td>
        <td>无持续风向</td>
        <td>微风</td>
    </tr>
</table>

</body>
</html>

以上就是本文的全部内容。

猜你喜欢