HTML 表格

HTML表格例子

定义HTML表格

样例解释:

用<table>标签定义表格

用<tr>标签把表格分成很多行

用<td>标签把每行分成很多列

一个表格行也可以用<th>标签划分成表头

<td>标签是用来装数据的.但也可以装HTML元素,像文字,图片,列表等等.

HTML 有边框的表格

如果不明确指定边框,边框是不会显示的.

可以用border属性添加边框.

border属性是基于HTML标准的,比用CSS来的好.

添加边框,用CSS border属性:

记住边框是添加给表和单元格的.

HTML表格,折叠的边框

如果你想添加折叠的边框,用CSS的border-collapse属性.

HTML 表格,单元格边距

单元格边距是指单元格里面的内容和边框之间的距离.

如果你不指定边距,表格将不显示边距.

要设置边距属性,用CSS的padding属性

HTML 表格的表头

表头用<th>标签定义.

默认情况下,所有的主流浏览器都是以加粗和居中来显示表头的.

表头左边对齐用CSS的text-align属性

带有边距的表格

指定单元格与单元格之间的距离.

用CSS的border-spacing属性指定表格的边距.

如果表格折叠(collapse)边框,border-spacing将无效 .

表格行合并

rowspan属性合并多行

HTML 带有标题的表格

用<caption>标签给表格添加标题

    <caption>标签必须在<table>标签之后.

给表格添加特殊样式

要给指定表格添加指定样式用id属性来标识.

本章总结

• HTML <table>元素定义表格
• HTML <tr>元素定义表格行
• HTML <td>元素定义列
• HTML <th>元素定义表头
• HTML <caption>元素定义表格的标题
• CSS的border属性定义边框
• CSS的border-collapse属性折叠所有的表格边框
• CSS的padding属性给单元格添加内边距
• CSS的text-align属性来对齐单元格里的内容
• CSS的border-spacing属性设置单元格与单元格之间的间距
• colspan属性合并多列
• rowspan属性合并多行
• id属性唯一标识表

HTML 关于表的标签