HTML——表格標簽


存在即是合理的。 表格的現在還是較為常用的一種標簽,但不是用來布局,常見處理、顯示表格式數據。

表格的應用場景:

1 創建表格

在HTML網頁中,要想創建表格,就需要使用表格相關的標簽。創建表格的基本語法格式如下:

 <table>
   <tr>
     <td>單元格內的文字</td>
     ...
   </tr>
   ...
 </table>

在上面的語法中包含三對HTML標簽,分別為 <table></table><tr></tr><td></td>,他們是創建表格的基本標簽,缺一不可,下面對他們進行具體地解釋

 1.table用於定義一個表格。
 
 2.tr 用於定義表格中的一行,必須嵌套在 table標簽中,在 table中包含幾對 tr,就有幾行表格。
 
 3.td /td:用於定義表格中的單元格,必須嵌套在<tr></tr>標簽中,一對 <tr> </tr>中包含幾對<td></td>,就表示該行中有多少列(或多少個單元格)。

注意:

 1. <tr></tr>中只能嵌套<td></td>
 2. <td></td>標簽,他就像一個容器,可以容納所有的元素

2 帶表頭的表格

表頭一般位於表格的第一行或第一列,其文本加粗居中,如下圖所示,即為設置了表頭的表格。設置表頭非常簡單,只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可。

3 帶標題的表格

caption 元素定義表格標題。

 <table>
    <caption>我是表格標題</caption>
 </table>

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

 

4 帶結構的表格(了解) 

 

 5 表格屬性

 

 

 tr標簽屬性:

 

 td和th標簽屬性:

 thead、tbody和tfoot標簽屬性:

6 合並單元格(難點)

跨行合並:rowspan 跨列合並:colspan

合並單元格的思想:

將多個內容合並的時候,就會有多余的東西,把它刪除。 例如 把 3個 td 合並成一個, 那就多余了2個,需要刪除。

公式: 刪除的個數 = 合並的個數 - 1

合並的順序 先上 先左

例子:

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> 

7 表格嵌套

說明:完整表格結構 + 放到td標簽中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM