免費(fèi)AI編程助手
HTML 表格
HTML 表格
HTML 表格實(shí)例
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線實(shí)例
表格
這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。
?。梢栽诒卷?yè)底端找到更多實(shí)例。）
HTML 表格
表格由<table>標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
HTML 表格的基本結(jié)構(gòu)：
<table>…</table>：定義表格
<th>…</th>：定義表格的標(biāo)題欄（文字加粗）
<tr>…</tr>：定義表格的行
<td>…</td>：定義表格的列
表格實(shí)例
實(shí)例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
嘗試一下 ?
在瀏覽器顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 表格和邊框?qū)傩?/h2>
如果不定義邊框?qū)傩?，表格將不顯示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。
使用邊框?qū)傩?code>border來(lái)顯示一個(gè)帶有邊框的表格：
HTML 表格表頭單元格
表格的表頭單元格使用<th>標(biāo)簽進(jìn)行定義。
表格的表頭單元格屬性主要是一些公共屬性，如：align、dir、width、height。
大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：
實(shí)例
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
嘗試一下 ?
在瀏覽器顯示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格標(biāo)題 <caption>
在<table>標(biāo)簽中我們可以使用<caption> ... </ caption>標(biāo)簽作為標(biāo)題，并在表的頂部顯示出來(lái)。
注：此標(biāo)簽在較新版本的HTML / XHTML中已棄用
實(shí)例
<table border = "1">
<caption>這是標(biāo)題</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
嘗試一下 ?
HTML 表格高度和寬度
在<table>標(biāo)簽中您可以使用width（寬）和height（高）屬性設(shè)置表格寬度和高度。您可以按像素或可用屏幕區(qū)域的百分比來(lái)指定表格寬度或高度。
實(shí)例
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
嘗試一下 ?
HTML 表格背景
您可以使用以下方法之一設(shè)置 HTML 表格的背景
bgcolor屬性 - 可以為整個(gè)表格或僅為一個(gè)單元格設(shè)置背景顏色。background屬性 - 可以為整個(gè)表設(shè)置背景圖像或僅為一個(gè)單元設(shè)置背景圖像。bordercolor屬性 - 可以設(shè)置邊框顏色。
注：HTML5 中不推薦使用
bgcolor，background和bordercolor屬性。不要使用這些屬性。
實(shí)例
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
</body>
嘗試一下 ?
使用background屬性需要提供圖像 URL 地址：
實(shí)例
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
嘗試一下 ?
HTML 表格空間
有以下兩個(gè)屬性，用于調(diào)整 HTML 表格中單元格的空間：
cellspacing屬性-定義表格單元格之間的空間cellpadding屬性-表示單元格邊框與單元格內(nèi)容之間的距離
實(shí)例
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>其琛</td>
<td>5000</td>
</tr>
<tr>
<td>曼迪</td>
<td>7000</td>
</tr>
</table>
嘗試一下 ?
HTML 合并單元格
- 如果要將兩個(gè)或多個(gè)列合并為一個(gè)列，將使用
colspan屬性 - 如果要合并兩行或更多行，則將使用
rowspan屬性。
實(shí)例
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
嘗試一下 ?
效果如下：
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
HTML 表格頭部、主體、頁(yè)腳
表格可以分為三個(gè)部分 - 頭部，主體和頁(yè)腳，如同word 文檔中頁(yè)面的頁(yè)眉、正文、頁(yè)腳。每個(gè)頁(yè)面保持相同，而正文是表格的主要內(nèi)容持有者。
頭部，主體和頁(yè)腳的對(duì)應(yīng)的三個(gè)標(biāo)簽是：
<thead>- 創(chuàng)建單獨(dú)的表頭。<tbody>- 表示表格的主體。<tfoot>- 創(chuàng)建一個(gè)單獨(dú)的表頁(yè)腳。
表可以包含多個(gè)<tbody>元素以指示不同的頁(yè)面。
但值得注意的是<thead>和<tfoot>標(biāo)簽應(yīng)出現(xiàn)在<tbody>之前：
實(shí)例
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
嘗試一下 ?
HTML 表格的嵌套
您可以在另一個(gè)表中使用一個(gè)表?？梢允褂?code><table>內(nèi)的幾乎所有標(biāo)簽。
實(shí)例
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>其琛</td>
<td>5000</td>
</tr>
<tr>
<td>曼迪</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
嘗試一下 ?
更多實(shí)例
沒(méi)有邊框的表格
本例演示一個(gè)沒(méi)有邊框的表格。
表格中的表頭 ( Heading )
本例演示如何顯示表格表頭。
帶有標(biāo)題的表格
本例演示一個(gè)帶標(biāo)題 ( caption ) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內(nèi)的標(biāo)簽
本例演示如何顯示在不同的元素內(nèi)顯示元素。
單元格邊距 ( Cell padding )
本例演示如何使用 Cell padding 來(lái)創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
單元格間距 ( Cell spacing )
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標(biāo)題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁(yè)眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁(yè)腳 |
更多建議：