HTML学习：表格基础，单元格合并

最新推荐文章于 2024-01-09 11:07:05 发布

RoxyL

最新推荐文章于 2024-01-09 11:07:05 发布

阅读量664

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45799504/article/details/114985235

版权

HTML学习：表格

文章目录

HTML学习：表格
- 表格基础
- 单元格合并

表格基础

三个标签：table，tr，td

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

table中有两个属性：

第一个属性：border=“1” 控制表格边框如果没有就不显示边框
第二个属性：style="border-collapse:collapse"是css样式，作用就是合并表格

tr作用：定义了表格的行（一个tr代表了一行）
td作用：定义了表格的单元格
关系：table里嵌套tr，tr里嵌套td（table>tr>td）

<body>
    <!-- 表格的基本使用 -->
    <table border="1">
        <!-- border="1" 添加边框 出来的效果是一种边框嵌套的感觉 -->
        <!-- border="1" style=border-collapse:collapse 边框就合并成了一个-->
        <!-- 快捷键 tr>td*4 -->
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
            <td>第1行，第4列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
        <tr>
            <td>第3行，第1列</td>
            <td>第3行，第2列</td>
            <td>第3行，第3列</td>
            <td>第3行，第4列</td>
        </tr>
    </table>
</body>

table border=“1” 展示：

table border=“1” style=border-collapse:collapse 展示
table border="1" style=border-collapse:collapse
如果想要设置表头，可以使用tr>th

		<tr>
            <!-- 设置表头 默认为加粗字体 -->
            <th>第1列</th>
            <th>第2列</th>
            <th>第3列</th>
            <th>第4列</th>
        </tr>

单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的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>
</head>
    <style>
        table{

        }
        td{
            width: 80px;
            height: 60px;
            text-align: center;
        }
    </style>
<body>
    <table border="1" style="border-collapse: collapse;">
        <!-- rowspan: 上下跨行合并
             colspan：左右跨列合并 -->
        <!-- 先看第一行 共四个 -->
        <!-- 跨列左右看 跨行上下看 -->
        <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>

RoxyL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习：表格基础，单元格合并

HTML学习：表格文章目录HTML学习：表格表格基础单元格合并表格基础三个标签：table，tr，tdtable作用：定义了一个表格的结构table中有两个属性：第一个属性：border=“1” 控制表格边框如果没有就不显示边框第二个属性：style="border-collapse:collapse"是css样式，作用就是合并表格tr作用：定义了表格的行（一个tr代表了一行）td作用：定义了表格的单元格关系：table里嵌套tr，tr里嵌套td（table>tr>td
复制链接

扫一扫