Html:表格

最新推荐文章于 2025-03-21 21:35:34 发布

最新推荐文章于 2025-03-21 21:35:34 发布 · 162 阅读

<table>：表格创建

<tr>：一行的创建

<th>：一个题头

<td>：一个普通单元格

注意：td元素中一定要非空，不然不能显示背景色。

通常组织形式如下

<table>

<tr>

</tr>

</table>

下面介绍<table>的常用属性：

(1)align：可选left\center\right,表明左对齐、右对齐、中间对齐。

(2)bgcolor：背景颜色，可选red\blue等常用颜色。

(3)border：默认表是没边框的，因此这个是创建边框。

(4)cellpadding：单元格的边和实际文本的间隔。

(5)cellspacing：单元格之间的间隙。

下面是<tr>的常用属性：

(1)align：left、center、right。默认<td>左对齐，<th>中对齐

(2)bgcolor：背景色

下面是<td>和<th>的常用属性：

(1)abbr：提供单元格的缩写版本。

(2)bgcolor

(3)colspan：一个单元格跨越的列的数量。

(4)nowrap：阻止文本换行。nowrap = "nowrap"

(5)rowspan：跨越行的数量。

<html> <head><title>Home</title></head> <body> <table cellspacing = "2"> <tr bgcolor = "orange"> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <th bgcolor = "orange">Morning</th> <td>Hello world</td> <td>Hello world</td> </tr> <tr> <th bgcolor = "orange">Afternoon</th> <td>Hello world</td> <td>Hello world</td> </tr> </table> </body> </html>

表的结构：

(1)表头：<thead>

(2)表主体：<tbody>

(3)表尾：<tfoot>

以上的元素对于外观没有任何影响，只是对于表格的一个归类。

<html> <head><title>demo</title></head> <body> <table border = "2"> <caption>Table</caption> <thead> <tr> <td colspan = "3" align = "center">Head</td> </tr> </thead> <tbody> <tr> <th bgcolor = "orange">Afternoon</th> <td>Hello world</td> <td>Hello world</td> </tr> </tbody> <tfoot> <tr> <td colspan = "3" align = "center">Foot</td> </tr> </tfoot> </table> </body> </html>

嵌套表：在<td>中再嵌套一个<table>

<html> <head><title>demo</title></head> <body> <table border = "2"> <tr> <td colspan = "2">Page head</td> </tr> <tr> <td> Item1<br /> Item2<br /> Item3<br /> Item4<br /> </td> <td> <table> <tr><td> Article1 </td></tr> <tr><td> Article2 </td></tr> <tr><td> Article3 </td></tr> </table> </td> </tr> <tr> <td colspan = "2">Page end</td> </tr> </table> </body> </html>
综合实例：

<html> <head><title>demo</title></head> <body> <table border = "2"> <caption>Classic Movie Day</caption> <tr> <th></th> <th>5 pm</th> <th>7 pm</th> <th>9 pm</th> <th>11 pm</th> </tr> <tr> <th>Screen one</th> <td>Star Wars</td> <td>Empire Strikes Back</td> <td>The Exorcist</td> <td>Return of the Jedi</td> </tr> <tr> <th>Screen two</th> <td colspan = "2">Dance</td> <td colspan = "2">Gone</td> </tr> <tr> <th>Screen three</th> <td colspan = "2">Empire Strikes Back</td> <td>The Exorcist</td> <td>Return of the Jedi</td> </tr> </table> </body> </html>

列分组：<colgroup>

用div可以对行分组，但是不能对列分组。

<table>

<tr>

.......

</tr>

</table>