table表格详细介绍

表格标签 table

我们在浏览网页时经常能发现段落、列表、图片等等元素出现比较多，但偶尔呢，也会看到一些表格元素，那么表格在代码中如何实现呢？

一个完整的表格应该是由table、thead、tbody、tfoot、tr、th、td组成。那么这么多的标签分别又代表什么呢？

我们学习表格前，要有一个划分归纳的思想，将表格由大到小细致的拆分去理解。

1. 首先我们先看table，table表示表格容器，用来定义表格。表示告知浏览器，我这一部分是表格的内容。

2.再往下是将表格分作了三个区域，分别是：thead：表格头部；tbody：表格身体；tfoot：表格底部

thead：定义表格的页眉，告知用户表格中有哪些项目
tbody：定义表格主要内容部分，向用户展示表格中具体的数据
tfoot：定义表格页脚，一般来说，这里会显示总归纳总结的内容，值得注意的是，tfoot不论写在什么位置，都只会显示在表格底部。

一般来说，我们可以不要thead，不要tfoot，但是tbody一定要写，这是将数据展示给用户的重要部分。

3.接着是将这些区域继续划分，划分为行，即tr

4.最后，将每一行继续细分为列，即表格单元格，这里值得注意的是，头部thead的单元格与其他单元格不同，同步单元格使用的是th标签，视觉会呈现出字体加粗居中的效果，其他单元格则使用td标签即可

我们将这样的思想总结成一句口诀：先主体，再区域，再写行，再写列。

现在我们通过口诀来完成代码并逐步观察代码效果：

先主体：table表示表格容器，即主体内容，给表格设置一个边框和宽高，打开页面，我们可以看到一个区域，即table规定的表格所在区域
再区域：通过thead、tbody、tfoot标签，为表格划分出来三个区域，区域中没有内容填充，在页面上不会有任何显示，所以这里我们暂时不观察页面
再写行：根据需求，在区域中完成规定的行数，即有几行写几个tr，这里也是一样暂时不观察页面
再写列：根据实际需求，在行中添加规定数量的单元格即th/td,并填充单元格中的内容

至此咱们最基础的表格就实现啦~

那么今天的内容，其实还没完，接下来，还要给大家介绍一下，合并单元格~

table为我们提供了两个属性来合并单元格，将重复的信息合并展示。

1.rowspan

rowspan叫做跨行合并，何为跨行，水平横向为一行，从第一行的单元格合并到第二行的单元格的纵向合并，此乃跨行合并。

2.colspan

colspan叫做跨列合并，何为跨列，垂直纵向为一列，从第一列的单元格合并到第二列的单元格的横向合并，此乃跨列合并。

两个的用法基本一致，遵守从上往下，从左往右的方式合并，合并时我们需要找到起始单元格，横向合并（跨列合并）起始单元格为最左侧的单元格，纵向合并（跨行合并）起始单元格为最上侧的单元格，我们给起始单元格属性，并赋值，一共合并几个单元格（包括起始单元格本身）值就给几。

这里值得注意的是：

不建议跨区域合并，跨区域合并，本身就是一件很抽象的事。

<table border="1"><thead><tr><th colspan="3">部门报销统计</th><!-- <th>部门报销统计</th><th>部门报销统计</th> --></tr><tr><th>部门</th><th>报销月份</th><th>金额</th></tr></thead><tbody><tr><td>运营部</td><td>3月</td><td>1322</td></tr><tr><td rowspan="2">销售部</td><td>3月</td><td>2355</td></tr><tr><!-- <td>销售部</td> --><td>4月</td><td>36550</td></tr><tr><td>研发部</td><td>3月</td><td>1335</td></tr></tbody></table>

以上代码，效果如下：

现在我们完成了一个最基础的合并单元格的操作。

table表格详细介绍相关推荐

【Jquery】Jquery操作table表格详细说明
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $ ...
的table数据重复添加_Excel中的超级表Table详细介绍（一）
↑↑↑关注ExcelEasy,让Excel更简单这是以前写的关于Table的介绍,最近看到有很多人还是不太了解,而我们的很多技巧和技术都会用到Table,就发到这里,供大家学习参考. 关于Table ...
html table colgroup,关于HTML colgroup标签的用法你知道哪些？colgroup用法和col的详细介绍...
html中colgroup是什么意思?HTML colgroup标签的用法你又知道哪些?在这里,本篇文章就为大家介绍了关于HTML colgroup标签的用法详解,还有colgroup和col元素的详 ...
android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
table表格信息过长显示省略，悬停显示详细信息；表格添加细边框
一.table表格信息过长显示省略...,悬停显示详细信息需求:表格td宽度设置百分比或者固定宽度,如果内容过长自动截掉并在文本末尾显示...,鼠标移动到文字上面显示全部内容: (基于bootstr ...
超级表格编辑功能详细介绍
超级表格编辑功能详细介绍今天我们来详细的介绍一下超级表格的编辑功能. 超级表格如何进行复制,黏贴? 部分品牌的电脑有单独的复制快捷键,请您以实际为准: 1. 在超级表格中,如果您想复制一个单元格中的 ...
【写博客常用】latex表格详细教程（table, tabular, multirow, multicolumn）latex表格内如何自动换行
[写博客常用]latex表格详细教程(table, tabular, multirow, multicolumn)&latex表格内如何自动换行看本文先看,本文是基于此篇做表格方法上加了换行 ...
Coreldraw X6图纸工具与表格工具有什么不同之详细介绍
内容提要:文章详细介绍coreldraw图纸工具与表格工具有什么不同,以及两个工具的使用方法和比较.对cdr感兴趣的朋友可加 cdr学习交流群:142574315 笔者使用的CorelDRAW X6版 ...
html table边框隐藏,HTML table表格边框的控制详细说明
原标题:HTML table表格边框的控制详细说明只显示上边框只显示下边框只显示左.右边框只显示上.下边框只显示左边框只显示右边框不显示任何边框复制代码代码如下: 表格边框的隐藏 b ...

table表格详细介绍

table表格详细介绍相关推荐

最新文章

热门文章