HTML表格
主要内容:
了解表格应用场景
表格基本结构
如何操作表格
表格属性
表格跨行跨列
案例:表格网页布局
数据的展示
HTML表格
<table border="1">表格
<caption></caption>表格标题,居中显示
<thead>
<tr>行
<th>表格头,内容居中,加粗显示</th>
</tr>
</thead>
<tbody>
<tr>行
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>行
<td>单元格</td>
</tr>
</tfoot>
</table>
带结构的表格
表格划分三部分:表头,主体,脚注
thead:表格的头(放标题之类内容)
tbody:表格的主体(放数据主体)
tfoot:表格的脚(放表格的脚注)
表格属性
width pixels,% 规定表格的宽度
align left,center,right 表格相对周围元素的对齐方式
border pixels 规定表格边框的宽度
Bgcolor rgb(x,x,x) #xxxxxx,colorName 背景颜色
cellpadding pixels,% 单元边沿与其内容之间的空白
cellspacing pixels,% 单元格之间的空白
frame 属性值 规定外侧边框的哪个部分可见
rules 属性值 规定内侧边框的哪个部分可见
tr标签属性
bgcolor colorName #xxx rgb(x,x,x)
跨列属性colspan ="2"
跨行属性rowspan ="2"
表格嵌套
嵌入表格说明:1要有完整表格结构,2要放在<td>标签中
3.布局案例
<table width="100%" bgcolor="#f2f2f2">
<caption></caption>表格标题,居中显示
<thead>
<tr height="80px" bgcolor="red">行
<td width="240px" bgcolor="blue" valign="top">
<table border="1">表格
<tr>行
<th>表格头,内容居中,加粗显示</th>
</tr>
<tr>行
<td>单元格</td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr height="20px" bgcolor="red">行
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr height="180px" bgcolor="red">行
<td>单元格</td>
</tr>
</tfoot>
</table>
表格网页布局时,不设置border边框,只是作为网页结构的排版。
单元格宽度的和=表格宽度
MOOK :Massive Open Online Course
总结:
1尽量少的使用表格嵌套
2尽量少的使用表格跨行跨列
否则会增加代码的整体维护成本
HTML表格
基本语法与结构
带表头的表格 th
带标题的表格caption
带结构的表格 thead tbody tfoot
表格属性 border width cellpadding cellspacing bgcolor
colspan跨列属性 rowspan跨行属性
Next:
表单网页,各种表单元素的使用,属性及表单交互内容…