網(wǎng)頁中經(jīng)常會涉及到表格的應(yīng)用,如圖解某一分類介紹時。那么 HTML 如何繪制表格呢?這篇文章 W3Cschool 小編告訴你。
<table></table>標(biāo)簽
表格的繪制離不開?<table></table>
?標(biāo)簽。表格的行由?<tr>
?標(biāo)簽所定義,而表格的列由?<td>
?所定義。表格的內(nèi)容可以是文本、圖片、列表、表單等。
先來看看表格的基本結(jié)構(gòu):
?<table>...</table>
?:定義表格
?<th>…</th>
?:定義表格的標(biāo)題欄(文字加粗)
?<tr>…</tr>
?:定義表格的行
?<td>…</td>
?:定義表格的列.
讓我們來看看具體使用:
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
實現(xiàn)效果:
值得注意的是:默認(rèn)情況下的表格是沒有邊框的,所以必須在<table></table>標(biāo)簽內(nèi)加上?border
?屬性,才能為表格附上邊框值。
如果要實現(xiàn)跨行或者跨列操作,則需要在?<td></td>
?標(biāo)簽上加上?rowspan
?或者?colspan
?。
具體效果:
相關(guān)代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格 - 編程獅(w3cschool.cn)</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td colspan="3">第三行</td>
</tr>
</table>
</body>
</html>
rowspan 屬性是用來合并行的屬性,后面的屬性值為合并行的行數(shù)。
colspan 屬性是用來合并列的屬性,后面的屬性值為合并列的列數(shù)。
更多的表格效果,可以通過 CSS 賦予樣式。
以上就是 HTML 如何繪制表格的全部內(nèi)容。更過 HTML 的相關(guān)教程請關(guān)注 W3Cschool 官網(wǎng)。
相關(guān)課程:HTML微課、HTML+CSS進階實戰(zhàn)