HTML--表格元素及相关样式

最新推荐文章于 2024-06-19 10:23:02 发布

南风依旧

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量2.2k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36354559/article/details/89891666

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

- - HTML--表格元素及相关样式
  - - 规则表格
    - 创建不规则表格

HTML–表格元素及相关样式

表格由<table> 标签来定义。每个表格均有指定行（由<tr> 标签定义），每行被分割为指定的单元格数量（由<td> 标签定义）。字母td指表格数据（table data），即数据单元格的内容。

规则表格

创建一个两行四列的表格

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
<!-- table表格标签,border设置边框宽度   1px是指的像素点 -->
<table border="1px">
    <!-- tr表格内的行标签 -->
    <tr>
        <!-- th表示表格中的表头 -->
        <th>标题一</th>
        <th>标题二</th>
        <th>标题三</th>
        <th>标题四</th>
    </tr>
    <tr>
        <!-- td表示表格中的列 -->
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

创建不规则表格

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
<!--这是一个表格-->
<!-- 注:这里的宽高设置为了展示效果,以后直接在样式中设置 -->
<table border="1px" width='300px' height='200px'>

        <!--tr表示行-->
        <!--td表示列-->
        <!--colspan表示”并列“-->
        <!--rowspan表示"并行"-->
    
        <tr>
            <!-- 第一列与第二列合并 -->
            <th colspan="2">1.1</th>
            <th>1.2</th>
        </tr>
        <tr>
            <!-- 第二行与第三行合并 -->
            <th rowspan="2">2.1</th>
            <th>2.2</th>
            <th>2.3</th>
        </tr>
        <tr>
            <th>3.1</th>
            <th>3.2</th>
        </tr>
    
    </table>
</body>
</html>

在这里插入图片描述

南风依旧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML--表格元素及相关样式

文章目录HTML--表格元素及相关样式规则表格创建不规则表格HTML–表格元素及相关样式表格由<table> 标签来定义。每个表格均有指定行（由<tr> 标签定义），每行被分割为指定的单元格数量（由<td> 标签定义）。字母td指表格数据（table data），即数据单元格的内容。规则表格创建一个两行四列的表格<!DOCTYPE html&...
复制链接

扫一扫

专栏目录