表格: 表格由 <table> 標簽來定義。每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。border是邊框屬性。 ...
表格:
表格由 <table> 標簽來定義。每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。border是邊框屬性。
<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>
運行結果:
表格標簽:
標簽 | 描述 |
---|---|
<table> | 定義表格 |
<th> | 定義表格的表頭,大多數瀏覽器會把表頭顯示為粗體居中的文本 |
<tr> | 定義表格的行 |
<td> | 定義表格單元 |
<caption> | 定義表格標題 |
<colgroup> | 定義表格列的組 |
<col> | 定義用於表格列的屬性 |
<thead> | 定義表格的頁眉 |
<tbody> | 定義表格的主體 |
<tfoot> | 定義表格的頁腳 |
表格形式:
1.無邊框表格
第一種:
<table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
第二種: <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
2.表頭
水平標題: <table border="1"> <tr> <th>表頭一</th> <th>表頭二</th> <th>表頭三</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> 垂直標題: <table border="1"> <tr> <th>表頭一</th> <td>100</td> </tr> <tr> <th>表頭二</th> <td>200</td> </tr> <tr> <th>表頭三</th> <td>300</td> </tr> </table>
運行結果:
表頭一 | 表頭二 | 表頭三 |
---|---|---|
100 | 200 | 300 |
表頭一 | 100 |
---|---|
表頭二 | 200 |
表頭三 | 300 |
3.標題
<table border="1"> <caption>標題</caption> <tr> <th>表頭一</th> <td>100</td> </tr> <tr> <th>表頭二</th> <td>200</td> </tr> <tr> <th>表頭三</th> <td>300</td> </tr> </table>
運行結果:
表頭一 | 100 |
---|---|
表頭二 | 200 |
表頭三 | 300 |
4.跨行跨列的表格單元格(
合併單元格:
單元格屬性:
colspan=2 水平合併 向右合併 值包含自己
rowspan=2 垂直合併 向下合併 值包含自己
合併單元格本質就是改變寬度 高度 占位實現的
)
<table border="1"> <tr> <th>表頭一</th> <th colspan="2">表頭二</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <table border="1"> <tr> <th>表頭一</th> <td>100</td> </tr> <tr> <th rowspan="2">表頭二</th> <td>200</td> </tr> <tr> <td>300</td> </tr> </table>
運行結果:
表頭一 | 表頭二 | |
---|---|---|
100 | 200 | 300 |
表頭一 | 100 |
---|---|
表頭二 | 200 |
300 |
5.表格內的標簽
<table border="1"> <tr> <td> <p>這是一個段落</p> <p>這是另一個段落</p> </td> <td>這個單元格包含一個表格: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>這個單元格包含一個列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table>
運行結果:
這是一個段落 這是另一個段落 |
這個單元格包含一個表格:
|
||||
這個單元格包含一個列表
|
HELLO |
6.單元格邊距, cellpadding="0" 邊距(內容和單元格的距離)
<h4>沒有單元格邊距:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>有單元格邊距:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
運行結果:
沒有單元格邊距:
First | Row |
Second | Row |
有單元格邊距:
First | Row |
Second | Row |
7.單元格間距, cellspacing="0" 間距(單元格與單元格的距離
<h4>沒有單元格間距:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>單元格間距="0":</h4> <table border="1" cellspacing="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>單元格間距="10":</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
運行結果:
沒有單元格間距:
First | Row |
Second | Row |
單元格間距="0":
First | Row |
Second | Row |
單元格間距="10":
First | Row |
Second | Row |