我們要做如下樣式的一個(gè)表格
-
首先實(shí)現(xiàn)一個(gè)簡單的表格
- 這個(gè)表格有四行四列，那我就先做一個(gè)這樣的表格
- 表格由 ** <table> ** 來定義，行由<tr>定義，列<td>來定義，
主要結(jié)構(gòu)是：
<table border="1">
<tr>
<td>...</td>
<td>...</td>
...
</tr>
...
</table>
-
最后實(shí)現(xiàn)的簡單表格
-
下一步需要合并單元格，需要使用的如下
- rowspan，作用是指定單元格縱向跨越的行數(shù)。
- colspan的作用是指定單元格橫向跨越的列數(shù)。
- 只要加在你需要合并的<td>里
//colspan用法
<table border="1">
<tr>
<td colspan=“3”> </td> //表示所在單元格橫跨三列
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
// rowspan用法
<table border="1">
<tr>
<td rowspan=“3”> </td> //表示所在單元格橫跨三行
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
- 合并好單元格之后的效果
-
最后需要加一個(gè)居中標(biāo)題
- html有一個(gè)標(biāo)簽caption 專門定義表格標(biāo)題，并且在表格上方居中
<table border="1">
<caption>購物車</caption>
...
</table
- 最后發(fā)現(xiàn)一個(gè)問題
- 表格中的文字沒有加粗和居中
如果把 td 換成 th 一切就都好了
注意：th 用于表頭
