HTML 表格 table

周巴帝

已于 2022-02-10 18:14:57 修改

阅读量469

点赞数

分类专栏： web 文章标签： html css 前端

于 2022-02-10 18:13:43 首次发布

本文链接：https://blog.csdn.net/Hello_super/article/details/122866658

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML 表格 table

1、表格简介

在现实生活中，我们经常需要使用表格来表示一些格式化数据，如：课程表、成绩单……，同样在网页中我们也需要使用表格，通过table标签来创建一个表格。在table中使用tr表示表格中的行，而tr中的td表示单元格，th表示头部单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 如下的这些如border、align、width不建议在这里使用，建议在css中表示。 -->
    <table border="1px" align="center" width="50%">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <!-- rowspan 纵向合并单元格 -->
            <td rowspan="2">A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
        </tr>
        <tr>
            <td>B3</td>
            <td>C3</td>
            <td>D3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <!-- colspan 横向合并单元格 -->
            <td colspan="2">C4</td>
        </tr>
    </table>
</body>
</html>

2、长表格

可以将一个表格分成三个部分，分别为：

头部，thead；
主体，tbody；
底部，tfoot；

通过这个格式，表格的样式基本上会被固定注，即thead中的代码永远在上面，tfoot中的永远在下面，不会受到页码位置的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长表格</title>
</head>
<body>
    <table border="1px" width='50%' align="center">
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>300</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>300</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>300</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>300</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>300</td>
                <td>200</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>1000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

3、表格的样式

border-spacing： 指定表格中边框之间的距离；

border-collapse： 将表格中的表框合并；

默认情况下元素在td中是垂直居中的，可以通过vertical-align来进行设置，如果表格中没有使用tbody而是直接使用了tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，所以，tr并不是table的直接子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的样式</title>
    <style>
        /* 设置表格的边框 */
        table{
            width: 50%;
            margin: 50px auto;
            border: 1px solid black;
            /* 只显示一个边框 */
            border-collapse: collapse;
        }
        td{
            /* 设置单元格的边框 */
            border: 1px solid black;
            /* 将单元格中的内容居中 */
            text-align: center;
            height: 30px;
        }
        /* 设置每行的颜色 */
        /* 可以写成 table > tbody > tr，但是如果直接写成table > tr是不行的。*/
        table tr:nth-child(2n){
            background-color: #bfa;
        }
        /* 设置box1样式 */
        .box1{
            width: 300px;
            height: 300px;
            background-color: orange;
            /* 将div显示为表格单元格，之后可以更好的设置元素在容器中居中 */
            display: table-cell;
            vertical-align: middle;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>3</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>4</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>5</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>6</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>7</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>8</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>9</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>10</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>28</td>
            <td>花果山</td>
        </tr>
    </table>
</body>
</html>

周巴帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 表格 table

HTML 表格 table1、表格简介在现实生活中，我们经常需要使用表格来表示一些格式化数据，如：课程表、成绩单……，同样在网页中我们也需要使用表格，通过table标签来创建一个表格。在table中使用tr表示表格中的行，而tr中的td表示单元格，th表示头部单元格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格</titl
复制链接

扫一扫

专栏目录