標籤之美五——網頁表格的設計

時間 2019-11-15

標籤標籤之美網頁表格設計欄目 HTML 简体版

原文原文鏈接

標籤之美——網頁表格的使用

經過表格，可使網頁排版更加清晰，形式更加簡潔漂亮。ide

1、表格佈局中三個重要的標籤

一、<table></table>：表格的開始和結束標籤，行列的佈局都在<table>標籤內。佈局

二、<tr></tr>行標籤的開始和結束字體

三、<tb></tb>列標籤的開始和結束spa

行標籤在列標籤的外層，不能單獨使用，其中必須至少有一列。示例以下：code

<body>
<table border="1"><!--爲了便於觀察，設置一個邊框-->
<tr>
<td>表格的內容</td>
</tr>
</table>
</body>

效果以下：圖片

2、單元格設置的相關標籤

一、單元格表頭<th></th>ci

這個標籤用來設置表格的表頭，做用和列標籤類似，只是字體是加黑的。作用域

<body>
<table border="1">
<tr>
<th>1</th><th>2</th>
</tr>
</table>
</body>

二、表格寬度屬性和高度屬性width,heightio

這兩個屬性能夠設置在<table>標籤裏，也能夠設置在<tr>和<tb>中，做用域會不一樣。table

<body>
<table border="1">
<tr>
<th width="200">1</th><th width="100">2</th>
</tr>
</table>
</body>

三、設置表格背景圖片background

這個屬性和尺寸屬性用法同樣，寫在相應的標籤裏，就是相應的背景圖案，設置的是圖片的路徑。

四、設置表格行列間距cellspacing

<body>
<table border="1" cellspacing="20">
<tr>
<th width="200">1</th><th width="100">2</th>
</tr>
</table>
</body>

五、設置單元格內容偏移量 cellpadding

<body>
<table cellpadding="50" border="2"><tr>
<td>第一列</td><td>第二列</td>
</tr></table>
</body>

3、表格的邊框屬性和對齊模式

靈活的應用邊框，可使表格看起來更加整潔有序。

一、邊框寬度屬性border

二、邊框的顏色屬性bordercolor

三、不顯示外邊框frame="void"

<body>
<table cellpadding="50" border="5" frame="void"><tr>
<td>第一列</td><td>第二列</td>
</tr></table>
</body>

四、設置frame="hsides"則只顯示上下外邊框

<body>
<table cellpadding="50" border="5" frame="hsides"><tr>
<td>第一列</td><td>第二列</td>
</tr></table>
</body>

五、設置frame="vsides"則只顯示左右外邊框

六、單獨顯示邊框的frame值分別爲：

上：above

下：below

左：lhs

右：rhs

七、設置表格對齊模式：

水平對齊模式：align

表格的align屬性能夠設置對齊模式，center,left,right分別對應居中，左對齊，右對齊。

垂直對齊模式：valign

和水平對齊模式類似，這個屬性的值爲：middle，top，bottom對應了中間對齊，上對齊和下對齊。

4、表格行和列的操做

一、行的合併：rowspan

<body>
<table cellpadding="50" border="5" frame="hsides">
<tr>
<td rowspan="2">第一行</td><td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
</table>
</body>

二、列的合併colspan

<body>
<table cellpadding="50" border="5" frame="hsides">
<tr>
<td colspan="2">第一列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</table>
</body>

三、表格的標題標籤<caption></caption>

<body>
<table cellpadding="50" border="5" frame="hsides" >
<caption>標題</caption>
<tr>
<td colspan="2">第一列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</table>
</body>

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。