表格 HTML table、caption、tr、th、td、thead、tbody、tfoot、colgroup、col 標籤
阿新 • • 發佈:2019-01-11
<table>
標籤
定義 HTML 表格。一個 HTML 表格包括 <table>
元素,一個或多個<tr> 行
、<th> 表頭
以及<td> 單元格
元素。更復雜的 HTML 表格也可能包括 <caption>
、<col>
、<colgroup>
、<thead>
、<tfoot>
以及 <tbody>
元素。
屬性 | 值 | 描述 |
---|---|---|
cellpadding | pixels |
規定單元邊沿與其內容之間 的空白。 |
cellspacing | pixels | 規定單元格之間 的空白。 |
rules | none groups rows cols all | 規定內側邊框的哪個部分是可見的。 |
<p>位於行之間的線條:</p>
<table rules="rows">
<tr>
<th>Month</th>
<th>Savings</th>
</ tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>位於列之間的線條:</p>
<table rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
< td>$100</td>
</tr>
</table>
<p>位於行和列之間的線條:</p>
<table rules="all">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<caption>
標籤
定義表格的標題,必須直接放置到 <table>
標籤之後,只能對每個表格定義一個標題。
<colgroup>
標籤
- 用於對錶格中的列進行組合,以便對其進行格式化。
-
<col>
標籤 規定了 元素內部的每一列的列屬性。
span 屬性 : number ,規定<col>
,<colgroup>
元素應該橫跨的列數。
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<thead>、<tbody>、<tfoot>
標籤
-
<thead>
元素的使用條件: -
1、
<thead>
、<tbody>
和<tfoot>
元素結合起來使用(表頭、主體、頁尾)。 -
2、必須作為
<table>
元素的子元素,出現在<caption>、<colgroup>
元素之後,<tbody>、 <tfoot> 和 <tr>
元素之前。
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
<table border="1">
<thead> <!--表頭-->
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot> <!--註腳-->
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody> <!--主體-->
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<tr>
標籤
定義 HTML 表格中的行,一個 <tr>
元素包含一個或多個 <th>
或 <td>
元素。
屬性 | 值 | 描述 |
---|---|---|
colspan | number | 規定單元格可橫跨的列數 |
rowspan | number | 規定單元格可橫跨的行數 |
valign | top middle bottom baseline | 規定單元格內容的垂直排列方式 |
align | right left center justify char | 定義單元格行的內容對齊方式 |
valign | top middle bottom baseline | 規定表格行中內容的垂直對齊方式。 |
<table border="1">
<caption>Monthly savings</caption> //表格標題:Monthly savings
<!--表頭一欄,包含了兩個表頭單元格,兩列兩行-->
<tr>
<th valign="middle">Month</th> //垂直居中對齊
<th valign="bottom">Savings</th> //垂直向底部對齊
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>