table學習筆記
學習《HTML權威指南》學習筆記
表格元素
基本的表格元素
table
局部屬性
boder;
內容
capioncolgrouptheadtfoottrthtd
習慣樣式
table {
display: table; border-collapse:separate;
border-spacing: 2px; boder-color:grey;
}tr
HTML表格基於行而不是列，每列必須分別標記
局部屬性
- 無
內容
- 一個或多個
td或th
習慣樣式
tr {
display:table-row; vertical-align:inherit;
boder-coler:inherit;
}td
局部屬性
colspanrowspanheaders
內容
- 流元素
習慣樣式
td {
display: table-cell; vertical-align:inherit;
}添加表頭單元格
th
- 表示表頭的單元格，用來區分數據和對數據的說明
局部屬性
colspanrowspanscopeheaders
內容
- 短語內容
習慣樣式
th {
display:table-cell; vertical-align:inherit;
font-weight:blod; text-align: centrt;
}添加表格結構
tbody
- 表示構成主體的全體行，不包括表頭行和表腳行
局部屬性
- 無
內容
tr
習慣樣式
tbody {
display:table-row-gorup; vertical-align: middle;
boder-color:inherit;
}thead
- 如果沒有
thead元素，所有tr都被視爲表格主體的一部分
局部屬性
- 無
內容
tr
習慣樣式
tbody {
display:table-header-gorup; vertical-align: middle;
boder-color:inherit;
}tfoot
- 形成表腳的行，可以放
tbody之前之後
局部屬性
- 無
內容
tr
習慣樣式
tbody {
display:table-footer-gorup; vertical-align: middle;
boder-color:inherit;
}不規則表格
colspan rowspan
rolspan和rowspan設置的值都必須是整數
html
<th colspan="3"></th>
headers
td,th都定義了headers屬性，提可以提供殘章輔助技術和屏幕閱讀器簡化表格的處理
屬性
- 一個或多個
th單元格的id屬性值
樣例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
thead th, tfoot th {
text-align:left; background: grey; color: white;
}
tbody th {
text-align: right; background: lightgrey; color: grey;
}
thead [colspan], tfoot [colspan] {
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<td id="rank">rank</td>
<td id="name">name</td>
<td id="color"rcoloe</td>
<td id="size" colspan="2">size & vote</td>
</thead>
<tbody>
<th id="first" headers="rank">favorite</th>
<td headers="name first"> Apple</td>
<td headers="color first">Green</td>
<td headers="size first">midium</td>
<td headers="size first">500</td>
</tbody>
<tbody>
<th id="second" headers="rank">favorite</th>
<td headers="name second">Orangs</td>
<td headers="color second">Orangs</td>
<td headers="size second">Large</td>
<td headers="size second">500</td>
</tbody>
<tfoot>
<th colspan="5">& cope; 2011 Adam</th>
</tfoot>
</table>
</body>
</html>此例中
thead和tbody中的每一個th元素都設置了全局的id值。tbody中的每個td和th都設置了headers屬性將相應的單元格和列表頭關聯起來，td還關聯了行表頭。
caption
- 定義一個標題將其與表格關聯起來
局部屬性
- 無
內容
- 流內容
習慣樣式
caption {
display:table-caption; text-align:center;
}處理列
colgroup
局部屬性
span
內容
col元素， 只有在沒有設置span屬性是才能使用；
習慣樣式
colgroup {
dispaly: table-colum-group;
}影響範圍
- 所有列中的單元格，包括
thead,tfoot,該元素無法做到更具體的更具體的選擇器的基礎，如(#colgroup1>td)是不會有任何元素匹配的;
col
- 能獲得更多的控制權，既能對一組列應用樣式，也能對改組中的個別列應用樣式
col位於colgroup元素中，每個col元素代表列組中的一列；
局部屬性
- span
內容
- 無
習慣樣式
col {
display: table-column;
}border
<table border="1"></table>- 該屬性不控制邊框的樣式
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
thead th, tfoot th {
text-align:left; background: grey; color: white;
}
tbody th {
text-align: right; background: lightgrey; color: grey;
}
thead [colspan], tfoot [colspan] {
text-align: center;
}
caption {
font-weight: bold; font-size: large;margin-bottom: 5px;
}
#colgroup1 {
background: red;
}
#col3 {
background: green;font-size: small;
}
#colgroup2 {
background: blue;font-size: small;
}
</style>
</head>
<body>
<table border="1">
<caption>Result of fruit</caption>
<colgroup id="colgroup1">
<col id="colAnd2" span="2">
<col id="col3">
</colgroup>
<colgroup id="colgroup2" span="2"></colgroup>
<thead>
<tr>
<th id="rank">rank</th>
<th id="name">name</th>
<th id="color">color</th>
<th id="size" colspan="2">size & vote</th>
</tr>
</thead>
<tbody>
<tr>
<th id="first" headers="rank">favorite</th>
<td headers="name first"> Apple</td>
<td headers="color first">Green</td>
<td headers="size first">midium</td>
<td headers="size first">500</td>
</tr>
<tr>
<th id="second" headers="rank">2th favorite</th>
<td headers="name second">Orangs</td>
<td headers="color second">Orangs</td>
<td headers="size second">Large</td>
<td headers="size second">500</td>
</tr>
<tr>
<th id="second" headers="rank">3th favorite</th>
<td headers="name second">Pomegrante</td>
<td colspan="2" rowspan="2">oooooooooooooo</td>
<td headers="size second">300</td>
</tr>
<tr>
<th rowspan="2">join 4th</th>
<td>cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>pineapple</td>
<td>brown</td>
<td>large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">& cope; 2011 Adam</th>
</tr>
</tfoot>
</table>
</body>
</html>圖片
;