html-表格

最新推荐文章于 2024-04-13 18:51:12 发布

木兮.

最新推荐文章于 2024-04-13 18:51:12 发布

阅读量550

点赞数 7

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_78251908/article/details/136890740

版权

1.表格基础

表格三个标签组成：

table：表格，作用是定义一个表格的结构

tr： table rows：定义表格的行

td：table dock：定义表格的单元格

关系：table > tr >td

2.基本使用

一个三行四列的表格

<body>
    <table border="1" style="border-collapse:collapse">
       <tr>
           <td>第一行，第一列</td>
           <td>第一行，第二列</td>
           <td>第一行，第三列</td>
           <td>第一行，第四列</td>
       </tr>
       <tr>
           <td>第二行，第一列</td>
           <td>第二行，第二列</td>
           <td>第二行，第三列</td>
           <td>第二行，第四列</td>
       </tr>
       <tr>
           <td>第三行，第一列</td>
           <td>第三行，第二列</td>
           <td>第三行，第三列</td>
           <td>第三行，第四列</td>
       </tr>
    </table>
</body>

table标签上有两个属性，

border="1",用来设置表格的边框，没有这个属性，边框不显示
style="border-collapse:collapse"是css样式，作用是合并表格

表头添加th设置

th可以设置表头，可以使用tr>th设置

        <tr>
            <th>第1列</th>
            <th>第2列</th>
            <th>第3列</th>
            <th>第4列</th>
        </tr>

3.单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性

rowspan：上下跨行合并

colspan：左右跨列合并

属性值是数字，数字是几就代表跨几行或跨几列

步骤：

确定一行有多少个td，
一共有几行（要看最多的有几行），
看哪个单元格合并，设置对应属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{

        }
        td{
            width: 40px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" style="border-collapse:collapse">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="3">3</td>
            <td>4</td>
        </tr>

        <tr>
            <td rowspan="2">5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td rowspan="2">9</td>
            <td>10</td>
        </tr>

        <tr>
            <td rowspan="2">11</td>
            <td>12</td>
            <td colspan="2">13</td>
            <td rowspan="2">14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td colspan="2">18</td>
        </tr>
    </table>
</body>
</html>

4.表格分区

一个完整的表格包含三个部分：表格标题，表格表头，表格主体

一个table内部实际还有三个分区标签组成

caption：定义表格标题

thead：定义表格的头部，内部嵌套tr>th

tbody：定义表格的主体,内部嵌套td>td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{}

        
        th{
            width: 120px;
            height: 40px;
            text-align: center;
        }
        td{
            height: 40px;
        }
    
    </style>
</head>
<body>
    <table border="1" style="border-collapse:collapse">
        <!-- 标题分区 -->
        <caption>（标题）各地区资产投资</caption>
        <!-- 表头分区 -->
        <thead>
            <tr>
                <th rowspan="2" >地区（表头）</th>
                <th colspan="2">按总分量（表头）</th>
                <th colspan="2">按比重分（表头）</th>
            </tr>
            <tr>
                <th>自年初累计/亿元（表头）</th>
                <th>去年同期增长/% (表头)</th>
                <th>自年初累计/亿元（表头）</th>
                <th>去年同期增长/% （表头）</th>
            </tr>

        </thead>
        <!-- 主体分区 -->
        <tbody>
            <tr>
                <td>全国</td>
                <td>1</td>
                <td>100</td>
                <td>1</td>
                <td>100</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>2</td>
                <td>100</td>
                <td>2</td>
                <td>100</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>3</td>
                <td>100</td>
                <td>3</td>
                <td>100</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>4</td>
                <td>100</td>
                <td>4</td>
                <td>100</td>
            </tr>

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

木兮.

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
html-表格

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性。border="1",用来设置表格的边框，没有这个属性，边框不显示。一个完整的表格包含三个部分：表格标题，表格表头，表格主体。thead：定义表格的头部，内部嵌套tr>th。tbody：定义表格的主体,内部嵌套td>td。td：table dock：定义表格的单元格。table：表格，作用是定义一个表格的结构。tr： table rows：定义表格的行。th可以设置表头，可以使用tr>th设置。关系：table > tr >td。
复制链接

扫一扫