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>

　　

 

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

 

posted @ 2018-05-22 09:24  Sky_Ice  阅读(424)  评论(0)    收藏  举报