【HTML入门】第十课 - 表格，也就是table标签

经海路大白狗

于 2024-07-12 11:17:24 发布

阅读量843

点赞数 7

分类专栏： WEB前端小白从这里出发文章标签： html 前端学习

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140372334

版权

WEB前端小白从这里出发专栏收录该内容

33 篇文章 9 订阅

订阅专栏

这一小节，我们说一下HTML中的表格。比如我们常常看见的学生成绩单，比如excel一个单元格一个单元格的，这些都是表格。

表格的标签名是 table 。

1 表格中的一些子标签

1.1 表头区域

比如成绩单，顶部表头总得有学号、学生姓名、科目、成绩、总成绩 这些字段，对吧。

这些字段都会放到表头里，这就需要一个 thead 的标签。

1.2 表格内容区域

那么表格内容区域呢，就需要有更详细的数据了，比如学号是001，姓名是张三，科目是数学，成绩是80，如果没有别的科目呢，总成绩就是80，如果有其他的科目呢，再累加，对吧。

这些内容都会放到表格内容区域里，这就需要一个 tbody 标签。

1.3 行和列

表格，都是一行一行的，然后再切割成一列一列的，这样切割完了就是，一块一块的，就成了单元格，一个小方格一个小方格的样子了。

而且呢，注意：是行包含着列，这个要记住。

行的标签名是 tr 。

表头的单元格标签是 th ，表格身体区域的单元格标签是 td 。

2 实战一小下

2.1 做个简单的成绩单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>HTML成绩</th>
                    <th>总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>80</td>
                    <td>90</td>
                    <td>96</td>
                    <td>266</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>71</td>
                    <td>80</td>
                    <td>100</td>
                    <td>251</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.2 加上边框线

这样显示有点乱，加上边框线，让表格好看一些。可以加个 border="1" 的属性设置，看下面代码，然后刷新一下网页，看是不是好看多了呢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>HTML成绩</th>
                    <th>总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>80</td>
                    <td>90</td>
                    <td>96</td>
                    <td>266</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>71</td>
                    <td>80</td>
                    <td>100</td>
                    <td>251</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.3 跨行

当然，我们还可以搞一个跨行的展示，比如张三和李四是 1班的，让他们放到同一个大行里，然后1班的同学占2行。

然后再加一个 2班，班里有王五和赵六，让他们也占用一个大行，这样2班，就会有2个小行。

这里需要设置的 rowspan 属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>班级</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">1班</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td rowspan="2">2班</td>
                    <td>王五</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

看上面的代码，我们给 td 单元格设置了 rowspan 的属性，然后同样是 1班的第二个单元格，就不需要添加相同的 td 代码了。

2.4 跨列

跨列呢，就是几个列，具有相同的特性，所以显示一个列信息就够了。就像刚才的跨行，目的不就是张三和李四都是1班的，所以为了不冗余显示，因为他们都有相同的信息属性，都是1班，所以显示一个 1班，跨行一下就够了。

跨列呢，就是说好几列合并起来呗。比如我们举个例子。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">1班</td>
                    <td>张三</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td colspan="4">1班总人数：2，总成绩：170</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td rowspan="2">2班</td>
                    <td>王五</td>
                    <td>70</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>冯七</td>
                    <td>75</td>
                </tr>
                <tr>
                    <td colspan="4">2班总人数：3，总成绩：245</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>