前端页面表格解析

这篇文章关键介绍了前端页面表格解析,包含表格的功效合理布局及格式难题，文中根据案例编码给大伙儿介绍的特别详尽，对我们的学习培训或工作中具备一定的参考借鉴使用价值，有需要的小伙伴们跟我开冲

作用：数据的展示，表格应用场景.

表格 行

单元格

前端页面表格解析_html

格式：

<table>
 
　　<caption>...</caption><!-表格标题，居中显示-->
 
　　<tr>
 
　　　　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　
 
　　</tr>
 
　　<tr>
 
　　　　<td>...</td>...
 
　　</tr>
 
</table>

表格结构标签：加载一部分 显示一部分 更加便利.

划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局

<table>
 
　　<caption>...</caption>
 
　　<thead>
 
　　<tr>
 
　　　　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　
 
　　</tr>
 
　　</thead>
 
　　<tbody>
 
　　<tr>
 
　　　　<td>...</td>...
 
　　</tr>
 
　　</tbody>
 
　　<tfoot>
 
　　<tr>
 
　　　　<td>...</td>...
 
　　</tr>
 
　　</tfoot>
 
</table>

前端页面表格解析_html_02

table标签属性

前端页面表格解析_html_03

前端页面表格解析_html_04

tr 标签属性

前端页面表格解析_html_05

前端页面表格解析_html_06

前端页面表格解析_html_07

<table>
 
 
　　<tr>
 
　　　　<td colspan="2"> ...</td>
 
　　　　<td> ...</td>
 
　　</tr>
 
　　 <tr><http://www.qlyl1688.com/>
 
　　　　<td>...</td>
 
　　　　<td>...</td>
 
　　　　<td>...</td>
 
　　</tr>
 
</table>

前端页面表格解析_html_08

前端页面表格解析_html_09

<table>
 
　　<tr>
 
　　　　<td> ...</td>
 
　　　　<td rowspan="2"> ...</td>
 
　　</tr>
 
　　 <tr>
 
　　　　<td>...</td>
 
　　　　<td>...</td>
 
　　　　<td>...</td>
 
　　</tr>
 
</table>

前端页面表格解析_html_10

前端页面表格解析_html_11

说明：1.完整表格结构 2.放到标签中

<table>
 
　　<tr>
 
　　　　<td> ...</td>
 
　　　　<td>　　
 
　　　　　　<table>
 
　　　　　　　　<tr>
 
　　　　　　　　　　<td> ...</td>
 
　　　　　　　　　　<td>.</td>
 
　　　　　　　　</tr>
 
　　　　　　</table>
 
　　　　</td>
 
　　</tr>
 
</table>

1.尽量少的使用表格嵌套。

2.尽量少的使用表格跨行跨列 。

增加代码的整体维护成本 。

使用表格进行网页结构布局一般不设置border

到此这篇关于前端页面表格解析的文章就介绍到这了，那么下期再见啦！！