HTML5中的表格代碼
HTML5中的表格是網頁設計中非常常見的一種元素,可以用來展示數據、制作菜單等等。接下來,我們就來一起學習HTML5中的表格代碼。
表格的基本結構
在HTML中,表格通常由
元素開始和結束,單個表格可以由多個行元素不斷重復,而每個行元素中可以有多個單元格元素。
下面是一個基本的表格結構的代碼示例:<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table> 在上述代碼中,我們使用了一張表格,其中有兩行和四個單元格。可以看出,表格中每個單元格的內容都是用 | 元素來表示,每行則用 |
標記包裹。
表格的邊框樣式
表格的邊框樣式可以通過CSS樣式表控制其表現,不過在這里我們也可以為表格添加邊框樣式。在HTML中,通過在元素中添加屬性border=“1”來設置表格邊框寬度為1。
下面是添加了邊框樣式后的代碼示例:<table border="1">
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
表格的列寬和行高
表格中列寬和行高也是可以通過HTML代碼來設置的。在元素中,可以添加屬性width和height來設置單元格的寬度和高度。在 | 元素中,也可以添加屬性height來設置行的高度。
下面是設置列寬和行高的代碼示例:<table border="1">
<tr height="30px">
<td width="100px">單元格1</td>
<td>單元格2</td>
</tr>
<tr height="50px">
<td width="50px">單元格3</td>
<td>單元格4</td>
</tr>
</table>
表格的合并單元格和表頭
表格中還有一個常用的功能就是合并單元格和設置表頭。在HTML中,可以通過在元素中設置rowspan和colspan屬性來合并單元格,其中rowspan代表合并行,colspan代表合并列。
另外,在 |
元素中,可以使用元素來設置表頭。
下面是合并單元格和設置表頭的代碼示例:<table border="1">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th colspan="2">聯系方式</th>
</tr>
<tr>
<td rowspan="2">小明</td>
<td>18</td>
<td>男</td>
<td>電話</td>
<td>郵箱</td>
</tr>
<tr>
<td>19</td>
<td>女</td>
<td>電話</td>
<td>郵箱</td>
</tr>
</table> 上述代碼中,我們合并了第二行第一列和第三列,還設置了表頭。可以看出,在表格中,通過組合使用以上功能,我們能夠創造各種樣式、功能齊全的表格。
|