App下載

HTML如何繪制表格?

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

網(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)效果:

HTML繪制表格

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

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

相關(guān)課程:HTML微課HTML+CSS進階實戰(zhàn)

0 人點贊