App下載

HTML如何繪制表格？

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

網(wǎng)頁中經(jīng)常會涉及到表格的應用，如圖解某一分類介紹時。那么 HTML 如何繪制表格呢？這篇文章 W3Cschool 小編告訴你。

<table></table>標簽

表格的繪制離不開?<table></table>?標簽。表格的行由?<tr>?標簽所定義，而表格的列由?<td>?所定義。表格的內(nèi)容可以是文本、圖片、列表、表單等。

先來看看表格的基本結(jié)構(gòu)：

?<table>...</table>?:定義表格

?<th>…</th>?：定義表格的標題欄（文字加粗）

?<tr>…</tr>?：定義表格的行

?<td>…</td>?：定義表格的列.

讓我們來看看具體使用：

<table border="1">
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
	</table>

實現(xiàn)效果：

HTML繪制表格

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

如果要實現(xiàn)跨行或者跨列操作，則需要在?<td></td>?標簽上加上?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)

HTML

0 人點贊