前端必知：17.表格

最新推荐文章于 2024-04-05 17:36:43 发布

小姚学前端

最新推荐文章于 2024-04-05 17:36:43 发布

阅读量140

点赞数 3

分类专栏： HTHL+CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_52799985/article/details/131817148

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

table 表示表格

表格的作用：

1.在之前可以使用表格进行布局

2.可以作为列表来显示数据

一个表格是由thead ，tbody 和tfoot 组成，这三个标签可以不写

浏览器会自动添加

想要创建一个表格可以使用以下标签

table：表示当前创建一个表格

tr：表示表格中的一行

th：表示表格的一个单元格一般代表表头

td：表示表格的一个单元格一般代表表内容

以上标签都是块标签

给table 添加 border 属性，设置边框

cellspacing设置单元格与单元格之间的距离

cellpadding 设置内容和边框之间的距离

（开发中不使用）

合并单元格

colspan 合并列（横向合并）

rowspan 合并行（竖向合并）

width 设置表格的宽度,可以是具体的值，也可以是百分比

height 设置表格的高度,可以是具体的值，也可以是百分比

以上，宽高属性可以设置到table td th上 width影响的是一列

height影响的是一行

使用border-collapse 设置单元格的边框是否合并

border-collapse：；不合并

border-collapse：collapse；合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        table {
          /* 合并表格中的边框 */
          border-collapse: collapse;
          /* width: 100%; */
        }
        
        th, td {
          border: 1px solid gray;
          /* padding: 8px; */
        }
        
        th {
          background-color: rgba(0, 255, 0, 0.5);
        }
      
      </style>
</head>
<body>
    <!-- 
        table 表示表格
        表格的作用：
        1.在之前可以使用表格进行布局
        2.可以作为列表来显示数据

        一个表格是由thead ，tbody 和tfoot 组成，这三个标签可以不写
        浏览器会自动添加

        想要创建一个表格可以使用以下标签
        table：表示当前创建一个表格
        tr：表示表格中的一行
        th：表示表格的一个单元格一般代表表头
        td：表示表格的一个单元格一般代表表内容

        以上标签都是块标签

         给table 添加 border 属性，设置边框
         cellspacing设置单元格与单元格之间的距离
         cellpadding 设置内容和边框之间的距离
         （开发中不使用）

        合并单元格
        colspan 合并列（横向合并）
        rowspan 合并行（竖向合并）

        width 设置表格的宽度,可以是具体的值，也可以是百分比
        height 设置表格的高度,可以是具体的值，也可以是百分比
        以上，宽高属性可以设置到table td th上 width影响的是一列
        height影响的是一行

        使用border-collapse 设置单元格的边框是否合并
        border-collapse：； 不合并
        border-collapse：collapse；合并

     -->
    <table border="1" cellspacing="10" cellpadding="100" width="1000">
        <tr>
            <th height="100">序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>林七夜</td>
            <td colspan="2">  x</td>
        </tr>
        <tr>
            <td>安卿鱼</td>
            <td>23</td>
            <td>男</td>
        </tr>
    </table>
    <h2>学生信息表</h2>


</table>
</body>
</html>