表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
表格不是用来布局页面的,而是用来展示数据的。

表格的具体用法：

     <table><tr><td>单元格内的文字</td>...</tr>...</table>

<table> </table>是用于定义表格的标签。
<tr> </tr>标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容。
<th>标签表示 HTML 表格的表头部分(table head 的缩写)
表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

表格属性：

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.

表格结构标签：

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.

<thead></thead>：用于定义表格的头部。<thead>内部必须拥有 <tr>标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在 <table></table>标签中。

合并单元格：

特殊情况下,可以把多个单元格合并为一个单元格

合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

合并单元格三步骤：
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。
3. 比如：<td colspan=“2”></td>,删除多余的单元格。

表格总结

表格学习整体可以分为三大部分:
表格的相关标签：table thead body tr th td
表格的相关属性：cellspacing cellpadding width height border
合并单元格：rowspan collspan

前端学习之HTML——表格相关推荐

WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
前端学习笔记之——表格元素
表格元素 1.生成基本的表格有三个元素是每个表格都必须要有的:table.tr 和 td. 元素 table 元素类型流允许具备的父元素任何可以包含流元素的元素局部属性 border 内容 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
layui前端页面table表格怎么格式化转换时间_个人经历：我的前端学习历程
很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了.这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话"在成长的道路上,我们不要给自己设定界限,只要拥有 ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
web前端学习之HTML
html标记语言是网页自动化测试所必须要掌握的,可以说是前端学习的基石,我都是在w3school上学的,所以就以此来讲.学习地址:http://www.w3school.com.cn/ HTML 指的 ...
给玩得好的女朋友写了一份前端学习路线。
利用这几天的碎片化时间,给在座的各位"朋友"整理了一份适合大部分开发者的前端自学开发路线. 无论你是非科班还是在校的大专生,或者是其他领域的开发者,希望这份开发路线可以更好的帮助你 ...

前端学习之HTML——表格