HTML表格标签

最新推荐文章于 2024-10-18 14:58:16 发布
最新推荐文章于 2024-10-18 14:58:16 发布
阅读量86 收藏
点赞数
分类专栏： 前端 # HTML 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44550660/article/details/129229727
版权 
<!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>

<body>
    表格
    <!--表格标签-->
    <!--表格属性
        表格属性通常通过CSS来设置
        align :left、center、right 规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替）
        bgcolor :颜色名字或颜色二进制代码 规定表格的背景颜色。（不推荐使用，用样式代替）
        border :1或者其他" "	规定表格单元是否拥有边框，默认为" "，表示没有边框。
        cellpadding :像素值	规定单元边沿与其内容之间的空白，默认1像素。
        cellspacing :像素值	规定单元格之间的空白，默认为2像素。
        width :像素值或百分比	规定表格的宽度。
        frame :void、above、below、hsides、lhs、rhs、vsides、box、border	规定外侧边框的哪个部分是可见的。
        rules :none、groups、rows、cols、all	规定内侧边框的哪个部分是可见的。
        summry :text	规定表格的摘要。
        border-collapse :collapse	设置表格的边框是否被折叠成一个单一的边框或隔开
    -->
    <h1 align="center">cellpadding="0" border="1"</h1>
    <table align="center" cellpadding="0" border="1">
        <!--tr是行标签-->
        <tr>
            <!--
            <th></th>是表头单元格
            <td></td>是定义表格中的单元格，必须嵌套在<tr></tr>当中
            td是指表格数据（table data），即数据单元格的内容-->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td>17</td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td>19</td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>17</td>
        </tr>

    </table>
    <h1 align="center">cellpadding="3 border="1"</h1>
    <table align="center" cellpadding="3" border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td>17</td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td>19</td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>17</td>
        </tr>

    </table>

    <h1 align="center">cellpadding="1" border="1" cellspacing="0"</h1>
    <table align="center" cellpadding="1" border="1" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td>17</td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td>19</td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>17</td>
        </tr>

    </table>
    <!--表格结构
        表格过于长，为了更好的表达语义，可以将表格分割成表格头部和表格主体
    -->

    <table align="center" cellpadding="1" border="1" cellspacing="0">
        <!--thead 表格头部-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!--tbody 表格主体-->
        <tbody>
            <tr>
                <td>刘德华</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>男</td>
                <td>17</td>
            </tr>
            <tr>
                <td>郭富城</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td>黎明</td>
                <td>男</td>
                <td>17</td>
            </tr>

        </tbody>
    </table>
    <h1 align="center">合并单元格</h1>
    <!--合并单元格
        确定跨行还是跨列
        找到目标单元格写上合并方式=合并单元格的数量，比如<td colspan="2"></td>
        删除多余的单元格

    -->
    <h2 align="center">正常表格</h2>
    <table border="1px" width="200" height="150" align="center">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <!--横向合并单元格-->
    <h2 align="center">横向合并单元格</h2>
    <table border="1px" width="200" height="150" align="center">
        <tr>
            <td colspan="2">1</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

    <!--纵向合并单元格-->
    <h2 align="center">纵向合并单元格</h2>
    <table border="1px" width="200" height="150" align="center">
        <tr>
            <td colspan="2">1</td>
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

    <!--横向+纵向合并单元格-->
    <h2 align="center">横向+纵向合并单元格</h2>
    <table border="1px" width="200" height="150" align="center">
        <tr>
            <td colspan="2">1</td>
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td rowspan="2" colspan="2">5</td>
        </tr>
        <tr>
        </tr>
    </table>



</body>

</html>
古月朝朝
关注
专栏目录
html表格标签
weixin_44992737的博客
06-06 5407
html表格标签详解
HTML表格标签详解
实泽有之，无泽虚之
03-26 9112
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML 表格标签
qq_48516121的博客
09-28 1252
HTML 表格标签
HTML表格标签超级详细
zheng_qingyuan的博客
06-19 4094
表格是网页中十分重要的组成元素。表格包含表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列等内容。 标签。简单的 HTML 表格由 table 元素以及一个或多个 、 或 元素组成表格结构其中： 元素定义表格行， 元素定义表头， 元素定义表格单元。标记常用属性属性名说明align设置表格相对周围元素的对齐方式bgcolor设置表格的背景颜色background设置表格的背景图片border设置表格的边框wi......
HTML表格标签的案例
weixin_45904557的博客
02-26 2525
前言 上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> td{ text-align: center; font-size: 24px
HTML的表格标签
qianniao_yingmo的博客
03-30 3334
表格标签需要知道的的基础知识
『HTML系列』表格标签
老__L的博客
10-25 8138
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，
HTML基础---表格标签
weixin_48055520的博客
04-15 1416
HTML--表格标签
html用于定义表格行的标签,HTML表格标签
weixin_39813009的博客
06-21 4484
1.表格的主要作用显示展示数据，表格不是用来布局页面的，而使用来展示数据的。2.表格的主要语法单元格的文字...(1)用来定义表格标签。(2)标签用于定义表格中的行，必须嵌套在标签中。(3)用于定义表格中的单元格，必须嵌套在中。(4)字母td指的是表格数据(table data),即数据单元格中的内容。3.表头单元格标签一般的表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容 加粗 居中...
04-HTML表格标签.html
01-08
04-HTML表格标签.html
基于html的大模型调试页面
abments的博客
10-11 676
基于html的大模型调试页面
HTML 标签简写及全称
wjs2024的博客
10-17 518
和
HTml + CSS 核心笔记 （八）
2301_80115241的博客
10-13 604
结构：通栏 > 版心 > 服务（service）+ 帮助中心（help）+ 版权（copyright）文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片。结构：ol > li > i（li 是大圆，i 是小圆）标签语义化（在合适的地方使用合适的标签）Favicon 图标：网页图标，出现在。结构：通栏 > 版心 > 导航 ul。结构：.header >结构：通栏 > 版心 >样式，例如：头部、底部。banner – 圆点。：各个网页相同模块的。头部（header）底部（footer）
Chromium html＜li＞对应c++接口定义
杰克东的专栏
10-14 508
html＜li＞
html 轮播图效果
最新发布
qq_42934208的博客
10-18 303
图片轮播效果，仅供参考
JS-常用功能
qq_40950398的博客
10-18 253
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 769
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
HTML表格标签符入门教程
"HTML入门学习，包括表格标签符的使用和基本HTML知识" 在HTML（超文本标记语言）中，学习基础知识至关重要，这包括了如何创建和测试网页，以及使用不同的标记符来影响网页内容的显示。HTML文件是独立于操作系统平台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值