一般來說,table握础、tr(行)、th(表頭單元格)悴品、td(普通單元格)就能組成一個html表格禀综,復(fù)雜一點可以包括caption(標題)简烘、thead(表頭)、tbody (主體)和tfoot (頁腳)等定枷,我的理解就是更模塊化和語義化一些孤澎。
th 文本會居中加粗,而 td 內(nèi)則是左對齊的普通文本欠窒。
一覆旭、舉個栗子
以上demo代碼如下:
<table border="1" style="border-collapse: collapse;width: 500px;">
<thead>
<tr>
<th rowspan="3">左</th>
<th colspan="3">上</th>
</tr>
<tr>
<th colspan="2">中</th>
<th>右</th>
</tr>
<tr>
<th>下</th>
<th>下</th>
<th>下</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>a</td><td>b</td><td>c</td>
</tr>
<tr>
<td>2</td><td>a</td><td>b</td><td>c</td>
</tr>
<tr>
<td>3</td><td>a</td><td>b</td><td>c</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4</td><td>a</td><td>b</td><td>c</td>
</tr>
</tfoot>
</table>
二、常用屬性
2.1 <table>常用屬性
- border:邊框?qū)挾?/li>
- cellpadding:單元邊沿與其內(nèi)容之間的空白
- cellspacing:單元格之間的空白+ summary:表格的摘要
- width:表格寬度
注意:table的原始樣式為 **display:table;** 所以給table設(shè)置height無效岖妄。
2.2 <tr>常用屬性
- align:行中內(nèi)容的水平對齊方式
- valign: 行中內(nèi)容的垂直對齊方式
2.3 <th>和<td>常用屬性
- align:單元格內(nèi)容的水平對齊方式
- valign: 單元格內(nèi)容的垂直對齊方式
- rowspan:單元格占的行數(shù)
- colspan:單元格占的列數(shù)
三型将、合并單元格
理解了瀏覽器解析和展示表格的過程,就不必記公式荐虐。
就像玩俄羅斯方塊一樣:
單元格排列遵循從上往下和從左往右的規(guī)律
遇到rowspan大的就豎著鼓起來
遇到colspan大的就多坐幾個凳子
但是一行還是那一行七兜,如下圖:
注意:表格的列數(shù)由最寬的一行決定