likes
comments
collection
share

HTML表格

作者站长头像
站长
· 阅读数 19

HTML表格简介

就是利用代码实现像excel那样的表格，基本结构：

<table>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>

上面的表示是一个2行3列的表格，说明:1、tr，table row（表格行）；<tr>和</tr>表示行的开始和结束2、td，table data cell（表格每一个格子），而<td>和</td>表示单元格的开始和结束。3、<table>和</table>表示整个表格的开始和结束所以现在你知道了上面的表格是2行3列了，嘿嘿😊。完整代码实现（记得一定自己敲一遍哦）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表格table</title>
</head>
<body>
    <table>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>
</html>

实现效果：HTML表格注意：<tr></tr>标签内的<td></td>数量是可以不一样的，可以自己去试一下。

表格标题caption，表头单元格th

基本每一个表格都是有一个标题和列的标题的，在html中也一样。示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表格table</title>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>
</html>

实现效果：HTML表格

表格语义化

看到文字可能会不知所云，其实本质上就是引入了thead,tbody,tfoot三个标签，让表格在每一部分都分区域，这样的话，在学习到CSS对html进行样式控制的时候更加准确，同时也使得代码更具有逻辑性。示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表格table</title>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <thead>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </thead>
        <tbody>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>内容汇总</td>
                <td>内容汇总</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

实现效果：HTML表格很多时候tfoot是不需要的，我们可以根据实际情况来使用。

合并行rowspan，合并列colspan

有时候一行（或者一列）对应着比较大的内容时就要使用，对多行（或者多列）内容的一个汇总。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表格table</title>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <thead>
            <th colspan="2">1</th>
            <th>2</th>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>内容汇总</td>
                <td>内容汇总</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

实现效果：HTML表格说明：rowspan="2"，就是直接把这一行当成两行来看就行了，colspan同理。

汇总练习

目标展示：HTML表格代码实现（一定要自己手动去敲一遍）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
    <title>HTML表格table</title>
</head>
<body>
    <table>
        <caption>学生成绩单</caption>
        <thead>
            <th>Name</th>
            <th>Sex</th>
            <th>Age</th>
            <th>Math Score</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td>96.5</td>
            </tr>
            <tr>
                <td>李华</td>
                <td>女</td>
                <td>19</td>
                <td>97</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总分</td>
                <!-- <td>    </td>
                <td>    </td> -->
                <td colspan="3">193.5</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

说明：

<style type="text/css">
        table,tr,td{border:1px solid silver;}
</style>

这里使用了CSS的表格样式控制，为了能够凸显表格的每一个格子，更好的理解代码。

转载自:https://segmentfault.com/a/1190000041879186
评论
请登录