详解HTML表格
2020-08-18 04:09
1036 查看
作用:数据的展示,表格应用场景.
<table>表格 <tr>行 <td>单元格
格式:
<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>
table标签属性
tr 标签属性
<table> <tr> <td colspan="2"> ...</td> <td> ...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table>
<table> <tr> <td> ...</td> <td rowspan="2"> ...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table>
说明:1.完整表格结构 2.放到<td>标签中
<table> <tr> <td> ...</td> <td> <table> <tr> <td> ...</td> <td>.</td> </tr> </table> </td> </tr> </table>
1.尽量少的使用表格嵌套。
2.尽量少的使用表格跨行跨列 。
增加代码的整体维护成本 。
使用表格进行网页结构布局一般不设置border
到此这篇关于详解HTML表格的文章就介绍到这了,更多相关HTML表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- html - 表格详解
- HTML 之 Table 表格详解
- 【网站制作视频教程】-第08讲 html表格应用详解!-传智播客
- HTML表格布局实际使用详解
- Html表格详解
- 关于html中的表格详解
- 详解HTML中的表格标签
- html and js 的隔行换背景色表格实例详解
- html表格详解
- html table 表格详解
- html表格标签详解
- html表格详解
- html表格排序之完全详解
- html表格模板,可扩展,很好用(内容来自互联网)
- Jsoup解析HTML实例及文档方法详解
- 详解Html替换元素与非替换元素
- HTML指令详解
- HTML学习---------1.19 为表格添加标题和摘要
- html之marquee详解
- 如何使用html创建表格