HTML第二篇(表格)

最新推荐文章于 2024-07-25 20:42:30 发布
最新推荐文章于 2024-07-25 20:42:30 发布
阅读量95 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41538952/article/details/104866945
版权

表格

  • 作用:较为常用的标签,但不是用来布局的,常用于显示,展示表格式数据.
  • 优点:可让数据显示规整,可读性非常好;特别是后台展示数据的时候表格会显得尤为重要,往往一个简约的表格就能够将复杂的数据展现得很有条理,虽然div布局也能够实现,但是没有表格来得方便.

创建表格的基本语法

<table>
     <tr>
         <td></td>
     </tr>
</table>
  1. table用于定义一个表格标签
  2. tr标签用于定义表格中的行,必须嵌套与table标签中
  3. td标签用于定义表格中的单元格,必须秦涛在行标签tr中
  4. 表格最合适的地方就是用于存储数据 ,td即为table date（表格数据）

表格属性

  • border:设置边框粗细
  • width：设置表格高度
  • height::设置表格高度
  • cellspacing:设置单元格之间的间距,也就是单元格的外边距
  • cellpadding:设置单元格中的内容与单元格的间距
  • align:设置表格的排版模式(居中,靠右,靠左),取值:lift,right,center
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500" heidht="30" cellspacing="0" cellpadding="10" align="center">
        <tr>
            <td>地点</td>
            <td>时间</td>
            <td>人物</td>
        </tr>
        <tr>
            <td>深圳</td>
            <td>18年</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>19年</td>
            <td>李四</td> 
        </tr>
        <tr>
            <td>北京</td>
            <td>20年</td>
            <td>王麻子</td>
        </tr>
    </table>
</body>
</html>

表头单元格标签

<th>文本</th>
  •  作用:可将表格的第一行或第一列单元格中的加粗并居中显示
  • 用法:将相应的td标签改为th标签即可
<table>
    <caption></caption>
    <caption>统计表</caption>
        <tr>
            <th>地点</th>
            <th>时间</th>
            <th>人物</th>
        </tr>
        <tr>
            <td>深圳</td>
            <td>18年</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>19年</td>
            <td>李四</td> 
        </tr>
        <tr>
            <td>北京</td>
            <td>20年</td>
            <td>王麻子</td>
        </tr>
</table>

 表格标题标签caption

  • 作用:设置表格标题,总是居于表格头部中央的位置
  • 用法:
<table>
    <caption></caption>
    <tr>
        <td></td>
        .....
    </tr>
</table>
  • 实现案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500" heidht="30" cellspacing="0" cellpadding="10" align="center">
        <!--用法:嵌套在table标签中的-->
        <caption>数据统计</caption>
        <tr>
            <th>地点</th>
            <th>时间</th>
            <th>人物</th>
        </tr>
        <tr>
            <td>深圳</td>
            <td>18年</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>19年</td>
            <td>李四</td> 
        </tr>
        <tr>
            <td>北京</td>
            <td>20年</td>
            <td>王麻子</td>
        </tr>
    </table>
</body>
</html>

合并单元格 

  • 两种合并方式
  1. 跨行合并:rowspan=“合并单元格的个数”
  2. 跨列合并:colspan="合并单元格的个数"
  • 合并顺序
  1. 先上后下,先左再右
  • 单元格合并三部曲
  1. 确认需要合并的单元格
  2. 根据先上后下(跨行),先左后右(跨列)的方式选取第一个单元格为目标单元格.
  3. 删除多余的单元格
  • 单元格合并案例
 <table border="1" width="500" heidht="30" cellspacing="0" cellpadding="10" align="center">
        <!--用法:嵌套在table标签中的-->
        <caption>数据统计</caption>
        <tr>
            <th>地点</th>
            <th>时间</th>
            <th>人物</th>
        </tr>
        <tr>
            <td>深圳</td>
            <td>18年</td>
            <!-- 跨行合并 -->
            <td rowspan="2">张三</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>19年</td>
            <!-- 删除跨行合并多余的单元格 -->
            <!-- <td>李四</td>  -->
        </tr>
        <tr>
            <td>北京</td>
            <!-- 跨列合并 -->
            <td colspan="2">20年</td>
            <!-- 删除跨列合并多余的单元格 -->
            <!-- <td>王麻子</td> -->
        </tr>
    </table>

扩展:表格结构划分

  1. 使用thead标签来定义表格的头部,与主题标签不同,其内必须有tr标签
  2. 使用tbody标签来定义主体部分,用于存放数据主体
  3. 使用tfoot标签来定义脚注
  4. 以上标签都必须存在于table标签中
  • 案例
<table border="1" width="500" heidht="30" cellspacing="0" cellpadding="10" align="center">
        <!--用法:嵌套在table标签中的-->
        <caption>数据统计</caption>
        <thead>
            <tr>
                <th>地点</th>
                <th>时间</th>
                <th>人物</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>深圳</td>
                <td>18年</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>上海</td>
                <td>19年</td>
                <td>李四</td> 
            </tr>
            <tr>
                <td>北京</td>
                <td>20年</td>
                <td>王麻子</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">数据来源于网络</td>
            </tr>
        </tfoot>
    </table>

 

江湖与天涯
关注
专栏目录
第六篇Bootstrap表格样式介绍
09-02
2. **条纹状表格** 如果希望表格行之间有明显的视觉区分，可以使用`.table-striped`类。这个类会在`<tbody>`内的偶数行添加灰色背景，形成类似斑马纹的条纹效果，有助于用户在大量数据中更容易地识别行间的差异。 ...
html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式
09-28
在这个例子中，第二个表格（具有背景色`#FF3300`）通过添加`style="visibility:hidden"`来隐藏其内容，但它的位置和大小仍然会影响周围的布局。 然而，根据具体需求，有时我们可能希望保留元素的位置，而仅隐藏内容...
HTML-基础表格篇--新手
loker66fan的博客
01-25 936
本人学习心得
【自学HTML笔记第2篇】HTML中的表格标签
m0_64231944的博客
10-21 769
HTML中的table标签
HTML学习第二篇
2301_77399671的博客
07-09 2102
HTML学习第二篇
Web前端：HTML篇（五）图像，表格
sjb2274540432的博客
07-25 1106
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。
html在线画表格,HTML如何绘制表格？
weixin_42509815的博客
05-31 619
网页中经常会涉及到表格的应用，如图解某一分类介绍时。那么 HTML 如何绘制表格呢？这篇文章 W3Cschool 小编告诉你。标签表格的绘制离不开​​标签。表格的行由​​标签所定义，而表格的列由​​所定义。表格的内容可以是文本、图片、列表、表单等。先来看看表格的基本结构：​...​:定义表格​…​：定义表格的标题栏(文字加粗)​…​：定义表格的行​…​：定义表格的列.让我们来看看具体使用：第一行第...
html哪个是表格标记,HTML表格标记
weixin_42154650的博客
06-29 1212
■ 表格标记欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。也请先明白围堵标记与空标记的分别，请看 【HTML概念】。■ ：这三个标记是定义表格的最重要的标记，可以说只学这三个已足够。是一个容器标记，意思是说它用以宣告这是表格而其它标记只能在它的范围内 才适用，属容器标记的还有其他。用以标示表格行(row)用以标示表格列(cell) 的参数设定(常用)：例如： width="4...
html作业填写信息,HTML作业——表格篇
weixin_39627665的博客
06-16 640
前言###对于表格(table标签)，在这次学习之前其实还真没想过真的用它去做表格。。。这句话看着有些奇怪。但是看了我这么说可能就能明白了，我最初利用table标签做过一些东西，但它的作用是规划页面布局。现在也能看到有一些有年头的网站的HTML代码中也利用了table来完成布局。但是后来，听过一个前辈说，使用table标签做布局看似很规整，但是在浏览器加载的过程中，渲染会很费劲。我当时不是很理解，...
初识HTML（三）表格、表单
Simple子夜
03-13 1703
前言： 本章节将了解到HTML里较为重要的标签：表格与表单。说到表格，在早期时候的网页甚至整个页面都是表格来进行布局的，笔者也在刚学习HTML的时候，就曾整张页面都是使用表格完成的，其作用可见不一般。而表单的话则是前后端交互的一个接口，在成为一个动态页面上起到了作用，那下面来了解一下它们的使用方式吧！ HTML表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（
HTML表格最小单元,html表格单元格大小.doc
weixin_34493827的博客
05-31 1022
html表格单元格大小篇一：html表格设置html表格设置容 表格的定义定义表格 ：定义表行：定义单元格：表格边框的宽度：BORDER=边框宽度，边框宽度为象素值 【使用范例】：定义一个一行一列的表格定义了一个一行一列的表格，表格内容为：“第一列” 。【使用范例】：定义一个一行两列的表格定义了一个一行两列的表格，表格第一列的内容为：“第一列” ，表格第二列的内容为：“第二列”。【使用范例】：定义...
html表格中加入斜线,html中给表格添加斜线
weixin_33831334的博客
05-30 2457
td加斜线table{border-collapse:collapse;}table,tr,td{border:1px solid black;}td{width:100px;/*这里需要自己调整，根据自己的需求调整宽度*/height:50px;/*这里需要自己调整，根据自己的需求调整高度*/position: relative;}td[class=first]:before{content: ...
HTML表格标记详细讲解(适合初学者)
09-28
本篇文章将深入解析HTML表格的主要标记及其用途。 首先，`<TABLE>`标记是HTML表格的核心，它是一个容器标记，用于声明一个表格的开始和结束。所有其他与表格相关的元素都必须包含在这个`<TABLE>`标记内。例如： ``...
二级表格的两种实现方式.rar
07-21
在描述中提到的第二个HTML文件中，就是利用jqGrid的子网格功能，当用户点击一个行时，可以展开显示下一级的数据，这极大地增强了数据的可读性。实现这个功能，需要配置jqGrid的subGrid参数，定义展开按钮和子网格的...
【java毕业设计】应急救援物资管理系统源码（springboot+vue+mysql+说明文档）.zip
11-06
项目经过测试均可完美运行！ 环境说明： 开发语言：java jdk：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse
基于java的音乐网站答辩PPT.pptx
11-06
基于java的音乐网站答辩PPT.pptx
基于Flexsim的公路交通仿真系统.zip
最新发布
11-06
基于Flexsim软件开发的仿真系统，可供参考学习使用
weixin073智慧旅游平台开发微信小程序+ssm后端毕业源码案例设计.zip
11-06
weixin073智慧旅游平台开发微信小程序+ssm后端毕业源码案例设计 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
python017基于Python贫困生资助管理系统带vue前后端分离毕业源码案例设计.zip
11-06
python017基于Python贫困生资助管理系统带vue前后端分离毕业源码案例设计 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
HTML5表格基础与特性详解
这个例子中，第二行和第三行的td元素都设置了colspan="2"，使得这两行的单元格占据了两列的空间。 同样，可以使用rowspan属性创建跨多行的单元格，例如： ```html <tr><th>Month</th></tr> <tr><td rowspan="2">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值