html表格笔记

来源：互联网发布：汉族战斗民族知乎编辑：程序博客网时间：2024/06/09 14:04

一些重要的标签：

<table> 表格

<tr> 行

<td> 单元格

<th> 表头单元格，居中加粗

<caption> 表格标题，居中显示

带结构的表格：使用表格结构标签，防止因为加载表格时间长导致用户体验不好，试用表格结构标签是表格边加载边显示。

表格划分为三部分：表头主体脚注

①thead：表格的头（放标题之类的内容）

②tbody：表格的主体（放数据主体）

③tfoot：表格的脚（放表格的脚注）

<thead><tbody><tfoot>标签不能影响布局

<table>标签属性：

cellpadding 单元边沿与其内容之间的空白

cellspacing 单元格之间的空白

frame 规定外侧边框哪个部分是可见的

rules 规定内侧边框哪个部分是可见的

<tr><td><th>标签属性：

Valign 内容的垂直对齐

跨列属性colspan

跨行属性rowspan

<!DOCTYPE html><html><head><title>表格</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center"><caption>平均工资</caption><thead align="center" valign="center"><tr bgcolor="yellow"><th rowspan="2">城市</th><th colspan="2">2014</th><th rowspan="2">2015</th><th rowspan="2">2016</th></tr><tr bgcolor="yellow"><th>上半年</th><th>下半年</th></tr></thead><tbody align="center" valign="center"><tr><td bgcolor="green">北京</td><td>8000</td><td>9000</td><td>10000</td><td>12000</td></tr><tr><td bgcolor="green">上海</td><td>6000</td><td>7000</td><td>8000</td><td>10000</td></tr></tbody><tfoot align="center" valign="center"><tr><td bgcolor="green">合计</td><td>7000</td><td>8000</td><td>9000</td><td>11000</td></tr></tfoot></table></body>

表格嵌套

1.完整表格结构

2.放到<td>标签内

<table border="6"><tr><td>2014</td><td>2015</td><td>2016</td></tr><tr><td><table><tr><td>上半年</td><td>下半年</td></tr><tr><td>8000</td><td>9000</td></tr></table></td><td>10000</td><td>12000</td></tr></table>

总结:

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

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

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

因为会增加代码的整体维护成本

阅读全文

0 0