HTML:表格
阿新 • • 發佈:2022-05-19
HTML 表格
表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割為若干單元格(由 <td> 標籤定義)。字母 td 指表格資料(table data),即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
<table> <tr> <td> xx, 1</td> <td> xx, 2</td> </tr> </table>
HTML 表格和邊框屬性
如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。
使用邊框屬性"border = "1" "來顯示一個帶有邊框的表格:
<table border="1"> <tr> </tr> </table>
HTML 表格表頭
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文字:
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td> xx1, 1</td> <td> xx1, 2</td> </tr> <tr> <td> xx2, 1</td> <td> xx2, 2</td> </tr> </table>
HTML 表格標題
表格的標題使用<caption>標籤進行定義。
<table border="1"> <caption>標題</caption> </table>
HTML跨行或跨列
表格某單元實現跨行或者跨列使用<th colspan="num">、<th rowspan="num">來進行。
例子:單元格跨兩列:
<h4>單元格跨兩列</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
結果為:
例子:單元格跨兩行:
<h4>單元格跨兩行:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
結果為:
HTML單元格邊距
表格單元格邊距使用cellpadding="dis"來進行設定。
<table border="1" cellpadding="10">
HTML單元格間距
表格單元格邊距使用cellspacong="dis"來進行設定。
<table border="1" cellspacing="5">