來這裏學習HTML表格,有源碼也有知識點介紹。

目錄

HTML表格介紹

HTML表格常用元素

HTML表格標籤(完整版)

HTML邊框屬性

HTML表格表頭

HTML合併單元格


HTML表格介紹

HTML表格常用元素

HTML表格由<table>標籤定義。

一個HTML表格由<table>,搭配使用<tr>、<th>、<td>。

<tr> 表格行

<th> 表頭

<td> 表格單元

下面給出實例

<table border="1"><!--參數1:顯示錶格外框-->
<tr>
  <th>水果</th>
  <th>蔬菜</th>
  <th>書籍</th>
</tr>
 <tr>
   <td>西瓜</td>
   <td>香菜</td> 
   <td>《四世同堂》</td>
 </tr>
 <tr>
   <td>橘子</td>
   <td>芹菜</td>
   <td>《老人與海》</td>
 </tr>
</table>

HTML表格標籤(完整版)

常用的就是上面提到的四種。

下面給出一個相對完整的標籤表。

標籤 描述
<table>  定義表格
<th> 定義表格的表頭(表頭單元格)
<tr> 定義表格的行
<td> 定義表格單元(標準單元格)
<caption> 定義表格標題
<colgroup> 定義表格列的組
<col> 定義用於表格列的屬性
<thead> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳

HTML邊框屬性

border屬性:表示是否顯示邊框。

參數爲1:顯示邊框。且參數1是像素寬度,值越大,邊框越寬。

參數爲0:不顯示邊框。

HTML表格表頭

<th>標籤用於規定表頭。

大多數瀏覽器會把表頭顯示爲粗體居中格式。

下面給出一個實例:

<table border="1">
<tr>
   <th>蔬菜</th>
   <th>水果</th>
</tr>
<tr>
  <td>西紅柿</td>
  <td>蘋果</td>
</tr>
</table>

HTML合併單元格

合併單元格:又名跨行跨列。

rowspan:橫跨的行數。rowspan=9 橫跨9行。

colspan:橫跨的列數。colspan=8 橫跨8列。

 

比如,實現以下功能:

<table border="1">
<tr>
<td>姓名:</td>
<td>夏爾哈</td>
</tr>
<tr>
<td rowspan="2">電話:</td>
<td>666 777 888</td>
</tr>
<tr>
<td>666 777 889</td>
</tr>

</table>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章