一個簡單表格的創(chuàng)建
創(chuàng)建一個HTML表格需要三個元素调榄，這三個元素結(jié)合使用就可以創(chuàng)建一個HTML表格。
第一個元素用來標(biāo)記表格主體呵扛，第二個元素用來標(biāo)記表格的行每庆，第三個元素用來標(biāo)記列。
第一步：
把整個表格放到一個< table>元素中今穿。
把每個表格內(nèi)容放到各自的< table>元素中創(chuàng)建表格缤灵。這意味著把內(nèi)容放在< table>和< /table>之間。
<table>
我是一個表格
</table>
第二步：
把每行的內(nèi)容放到一個< tr>元素中
第三步：
把每列的元素放到一個< td>元素中
<table border="1">
<tr>
<th>名稱</th>
<th>重量</th>
<th>單價(jià)</th>
<th>小計(jì)</th>
</tr>
<tr>
<th>蘋果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th></tr>
</table>
運(yùn)行結(jié)果：
簡單表格
表格的行和列的合并
我們已經(jīng)實(shí)現(xiàn)了一個簡單的表格，但是在很多的地方腮出，我們年還需要將表格的行和列進(jìn)行合并帖鸦，構(gòu)造復(fù)雜的表格。
colspan和rowspan分別設(shè)置表格的占用標(biāo)準(zhǔn)表格的幾行和幾列利诺，使用如下：
<table border="1">
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th>
<tr>
<th>重量</th>
<th>單價(jià)</th>
</tr>
</tr>
<tr>
<th>蘋果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th>
</tr>
<tr>
<th colspan="3">總計(jì)</th>
<th>27元</th>
</tr>
</table>
運(yùn)行結(jié)果：
表格行列的合并
表格標(biāo)題
我們一般制作的表格都會有一定的主題富蓄，那我們就需要給表格添加標(biāo)題
caption標(biāo)簽:給表格設(shè)置標(biāo)題，在<table>標(biāo)簽內(nèi)添加標(biāo)題慢逾。如下：
<table border="1">
<caption>購物清單</caption>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th>
<tr>
<th>重量</th>
<th>單價(jià)</th>
</tr>
</tr>
<tr>
<th>蘋果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th>
</tr>
<tr>
<th colspan="3">總計(jì)</th>
<th>27元</th>
</tr>
</table>
運(yùn)行結(jié)果：
表格標(biāo)題
到此，我的這個表格就實(shí)現(xiàn)了灭红。
但是侣滩，在完成的過程中我發(fā)現(xiàn)了一些問題，如下：
- < th>和< td>的區(qū)別：
<th>...</th> 定義表頭單元格变擒。表格中的文字將以粗體顯示君珠，表格中的文字將居中顯示。在表格中也可以不用此標(biāo)簽娇斑，<th>標(biāo)簽必須放在<tr>標(biāo)簽內(nèi)策添。
<td>...</td>定義單元格標(biāo)簽，一組<td>標(biāo)簽將建立一個單元格毫缆，<td>標(biāo)簽必須放在<tr>標(biāo)簽內(nèi)唯竹。
示例如下：
<table border="1">
<tr>
<th>名稱</th>
<th>重量</th>
<th>單價(jià)</th>
<th>小計(jì)</th>
</tr>
<tr>
<th>蘋果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th colspan="3">總計(jì)</th>
<th>27元</th>
</tr>
<tr>
<td colspan="3">總計(jì)</td>
<td>27元</td>
</tr>
</table>
運(yùn)行結(jié)果：
th與td的區(qū)別
