HTML笔记：表格标签

最新推荐文章于 2022-05-08 15:25:37 发布

明天&阳光

最新推荐文章于 2022-05-08 15:25:37 发布

阅读量185

点赞数

分类专栏：笔记学习笔记文章标签： html

本文链接：https://blog.csdn.net/lfz9696/article/details/107944254

版权

笔记同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

学习笔记

14 篇文章 0 订阅

订阅专栏

文章目录

表格标签

表格标签

创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

当然如果我们这个表有表头，可以将第一个 tr 里面的 td 都换成 th ,里面的内容就是表头的内容，表头里面内容默认加粗居中。

里面的 table（双标签）表示一个表，tr(双标签）表示一行，td(双标签）或者th（双标签）表示一行的每一列

如果有表名，我们还可以在 talbe 里面 tr 外面加

<caption>表名</caption>

表格属性

在这里插入图片描述
border设置为border=“0”，表示无边框，常设为1
cellsapcing 表示单元格与单元格之间的距离，常设为0
cellpadding 表示单元格中内容与的单元格边框之间的距离（上下）
align 表示表在网页中的水平对齐方式，可以设置为center 居中，right靠右，left靠左

合并单元格

合并风格：从左到右，从上到下

行合并

就是跨列合并，用colspan
在所需跨列合并的地方，按照代码的书写顺序，在最开始单元格里面添加属性 colspan="需要合并的单元格数量”，然后剩下被合并的位置忽略不写，直接写下面的，你在第一个单元格添加了属性colspan和相应的合并数量来，已经是默认了占用多个单元格。

列合并

就是跨行合并，用rowspan.
用法和colspan类似，在需要列合并的第一行处（按照代码书写顺序），添加属性rowspan=“合并数量”，在合并处的下面行可以不写了，默认占有该行了。

示例：

在这里插入图片描述


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>作业4：合并NBA单元格</title>
</head>

<body>
    <table border="1px" cellspacing="0px" cellpadding="5px" align="center" width="700px" height="300px">
        <caption>NBA球队信息</caption>
        <tr>
            <td>球队</td>
            <td>球员</td>
            <td>球员年龄</td>
            <td>所属区</td>
            <td>英文名</td>
            <td>地名</td>
            <td>球员顺位</td>
        </tr>
        <tr>
            <td rowspan="2">湖人</td>
            <td>詹姆斯</td>
            <td rowspan="3">35</td>
            <td rowspan="5">西部</td>
            <td rowspan="2">Lakers</td>
            <td rowspan="3">洛杉矶</td>
            <td rowspan="2">状元</td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td>戴维斯</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>快船</td>
            <td>莱恩纳德</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td>Clippers</td>
            <!-- <td></td> -->
            <td rowspan="2">榜眼</td>
        </tr>
        <tr>
            <td>勇士</td>
            <td>库里</td>
            <td rowspan="3">31</td>
            <!-- <td></td> -->
            <td colspan="2">Warriors金州</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>森林狼</td>
            <td>唐斯</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="3">Timberwolves明尼达苏状元</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>尼克斯</td>
            <td rowspan="2">欧文</td>
            <!-- <td></td> -->
            <td rowspan="2">东部</td>
            <td>Knicks</td>
            <td rowspan="2">纽约</td>
            <td rowspan="2">状元</td>
        </tr>
        <tr>
            <td>篮网</td>
            <!-- <td></td> -->
            <td>25</td>
            <!-- <td></td> -->
            <td>Nets</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="6">25人</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>
</body>

</html>

明天&阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记：表格标签

文章目录表格标签创建表格表格属性合并单元格行合并列合并示例：表格标签创建表格<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>当然如果我们这个表有表头，可以将第一个 tr 里面的 td 都换成 th ,里面的内容就是表头的内容，表头里面内容默认加粗居中。里面的 table（双标签）表示一个表，tr(双标签）表示一行，td(双标签）或者th（双
复制链接

扫一扫