一、定義一個HTML表格
使用標籤定義HTML表格。
標籤定義表中的每一行使用。使用標籤定義表頭。默認情況下,表標題是粗體和居中的。一個表的數據/單元使用 標籤定義。
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
注意: 元素是表的數據容器。它們可以包含所有的HTML元素; 文本、圖像、列表、其他表格等。
1. HTML表格 - 添加邊框
如果不指定表的邊框,則將不顯示邊框。
使用CSS設置表格的邊框如下:
<style>
table, th, td {
border: 1px solid black;
}
</style>
記住爲表和表單元格定義邊框。
2. HTML 表格 - 摺疊邊框
如果你想要的邊框摺疊成一個邊框,添加CSS border-collaps邊框屬性:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; /*摺疊邊框*/
}
</style>
3. HTML 表格 - 添加單元格填充(padding)
單元格填充(padding)指定單元格內容及其邊框之間的空間。
如果不指定填充(padding),則將顯示錶單元格而不填充(padding)。
設置填充,使用css padding屬性:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px; /* 設置邊距*/
}
</style>
4. HTML表格 - 左對齊標題
默認情況下,表標題是粗體和居中的。
左對齊的表格標題,使用CSS text-align屬性:
th {
text-align: left;
}
5. HTML表格 - 添加邊框間距
邊框間距指定單元格之間的空間。
設置一個表空間的邊界,使用CSS border-spacing屬性:
table {
border-spacing: 15px; /*添加邊框間距*/
}
注意:如果表已經是collapsed摺疊邊框,邊框間距沒有影響。
6. HTML表格 單元格跨多列
使表格單元格跨越多個列,使用colspan屬性:
<table style="width:100%">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
7. HTML表中 - 單元格跨多行
使表格單元格跨多個行,使用rowspan屬性:
<table style="width:100%">
<tr>
<th>姓名:</th>
<td>比爾</td>
</tr>
<tr>
<th rowspan="2">電話:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
8. HTML表格 - 添加標題
若要向表添加標題,請使用`標籤:
<table style="width:100%">
<caption>每月儲蓄</caption> <!--標題-->
<tr>
<th>月</th>
<th>儲蓄</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
注意:` 標籤必須立即插入在``標籤之後。
二、項目
爲表格指定一個特殊樣式
爲表格指定一個特殊樣式, 添加一個 id 屬性:
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
現在您可以爲這個表定義一個特殊的樣式:
table#t01 {
width: 100%;
background-color: #f1f1c1;
border: 2px solid black;
}
添加更多樣式:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
小總結
標籤 | 描述 |
---|---|
<table> | 定義表格 |
<th> | 定義表中的頭單元格 |
<tr> | 定義表中的一行 |
<td> | 定義表中的單元格 |
<caption> | 定義一個表格標題 |
<colgroup> | 指定表格中一組或多個列的格式. |
<col> | 指定列內每個列的屬性用. <colgroup> 元素 |
<thead> | 使用表中的標題內容分組 |
<tbody> | 將身體內容分組在一個表中 |
屬性 | 描述 |
---|---|
border |
屬性定義一個邊框 |
border-collapse |
定義摺疊單元格邊框的屬性 |
padding |
添加到單元格中的填充 |
text-align |
對齊單元格文本 |
border-spacing |
設置單元格之間的間距 |
colspan |
使單元格跨越多個列 |
rowspan |
使單元格跨越多行 |
id |
唯一表示一個表格 |
三、總結
本文主要介紹了HTML表格,對錶格中主要的屬性進行了詳細的介紹。對遇到的問題進行詳細的解答。方便大家表格的標籤的瞭解。希望對大家的學習有幫助。