App下載

HTML如何繪制表格？

猿友 2021-03-22 15:12:17 瀏覽數(shù) (4483)
反饋

網(wǎng)頁(yè)中經(jīng)常會(huì)涉及到表格的應(yīng)用，如圖解某一分類介紹時(shí)。那么 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>

實(shí)現(xiàn)效果：

HTML繪制表格

值得注意的是：默認(rèn)情況下的表格是沒有邊框的，所以必須在<table></table>標(biāo)簽內(nèi)加上?border?屬性，才能為表格附上邊框值。

如果要實(shí)現(xiàn)跨行或者跨列操作，則需要在?<td></td>?標(biāo)簽上加上?rowspan?或者?colspan?。

具體效果：

HTML繪制表格

相關(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 如何繪制表格的全部?jī)?nèi)容。更過 HTML 的相關(guān)教程請(qǐng)關(guān)注 W3Cschool 官網(wǎng)。

相關(guān)課程：HTML微課、HTML+CSS進(jìn)階實(shí)戰(zhàn)

HTML

0 人點(diǎn)贊