您當前位置：首頁 > web前端 > htmlcss > 【HTML】表格標記

【HTML】表格標記

來源：程序員人生發布時間：2015-06-05 08:53:55 閱讀次數：3816次

設計網頁時常常會用到表格來組織頁面信息，它能將網頁劃分成任意多個矩形區域，每一個區域可包括導航、文字、圖象、動畫等信息，設計者可將任意的網頁元素放入其中。

1. 表格的定義：<table></table>

1）在需要使用表格的地方插入成對的<table></table>標記，就能夠完成表格的插入。定義表格經常使用的標記有

標簽	說明
<table>	表格標記，用于插入表格
<tr>	行標記，用于插入行
<td>	列標記，用于插入列
<th>	表頭標記，用于設置表頭信息
<caption>	表格標題，設置標題

實例：

<html> <head> <title>表格的定義</title> </head> <body> <table border="1"> <caption>計算機學習</caption> <tr> <th>CS</th> <th>數據庫</th> <th>BS</th> </tr> <tr> <td>軟件工程</td> <td>SQL Server</td> <td>html</td> </tr> <tr> <td>設計模式</td> <td>mySql</td> <td>JavaScript</td> </tr> </table> </body> </html>

效果：

2）劃分結構表格

劃分結構表格是指將1個表格分成3個部份，分別使用3個標記

標簽	說明
<thead></thead>	定義1組表頭行
<tfoot></tfoot>	為表格添加1個標注
<tbody></tbody>	定義表格的主體部份

2. 表格屬性

在網頁的設計中常常需要對網頁中的表格<table>做1些格式上的設置，這些設置是通過對表格標記屬性的設置完成的。

屬性名稱

說明

width

表格的寬度

border

邊框粗細

frame（8種屬性值）

設置表格的邊框樣式

屬性值	說明
void	不顯示邊框
border	顯示上下左右側框
above	顯示上邊框
below	顯示下邊框
hsides	顯示上下邊框
lhs	顯示左側框
rhs	顯示右側框
vsides	顯示左右側框

rules（5種屬性值）

設置表格內部邊框的屬性

屬性值	說明
all	顯示所有內部邊框
none	不顯示內部邊框
groups	顯示介于行列邊框
cols	僅顯示列邊框
rows	僅顯示行邊框

實例：

<html> <head> <title>表格的屬性</title> </head> <body> <table width="500" frame="hsides" rules="rows"> <caption>計算機學習</caption> <tr> <th>CS</th> <th>數據庫</th> <th>BS</th> </tr> <tr> <td>設計模式</td> <td>mySql</td> <td>JavaScript</td> </tr> <tr> <td>軟件工程</td> <td>SQL Server</td> <td>html</td> </tr> </table> </body> </html>

效果：

3.表格行與單元格的屬性

在表格中，通過<tr>標記的屬性來設置表格中某1行的屬性，用<td>的屬性設置表格單元格的屬性。

屬性名稱

說明

align（3種屬性值）

設置行內容的水平對齊方式

屬性值	說明
left	左對齊
right	右對齊
center	居中對齊

valign（4種屬性值）

設置行內容的垂直對齊方式

屬性值	說明
top	頂端對齊
middle	居中對齊
bottom	底部對齊
baseline	基線

rowspan

設置跨行，即單元格的縱向合并

colspan

設置跨列，即單元格的橫向合并

實例：

<html> <head> <title>表格行與單元格的屬性</title> </head> <body> <table width="500" frame="hsides" rules="all"> <caption>計算機學習</caption> <tr> <th>CS</th> <th>數據庫</th> <th>BS</th> </tr> <tr> <td rowspan="2" align="center">設計模式</td> <td >mySql</td> <td>JavaScript</td> </tr> <tr> <td>SQL Server</td> <td>html</td> </tr> </table> </body> </html>

效果：