App下載

在html網(wǎng)頁(yè)設(shè)計(jì)中如何制作表格？

猿友 2021-06-04 16:00:27 瀏覽數(shù) (12250)
反饋

在我們的一個(gè)日常的學(xué)習(xí)Web前端知識(shí)中遇到的問題肯定的比較多的，那么今天我們就來(lái)討論一下在html網(wǎng)頁(yè)設(shè)計(jì)中如何制作表格？吧！

步驟如下：

1.首先我們向在Web前端開發(fā)工具中新建一個(gè) .html 文件（這邊小編用的是HBuilderX），在文件中輸入下面這些代碼就可以看到我們的一個(gè)表格的雛形，代碼截圖如下：

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<table >

			<thead>

				<tr>

					<th>標(biāo)題1</th>

					<th>標(biāo)題2</th>

					<th>標(biāo)題3</th>

					<th>標(biāo)題4</th>

					<th>標(biāo)題5</th>

					<th>標(biāo)題6</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>單元格1</td>

					<td>單元格2</td>

					<td>單元格3</td>

					<td>單元格4</td>

					<td>單元格5</td>

					<td>單元格6</td>

				</tr>

				<tr>

					<td>單元格1</td>

					<td>單元格2</td>

					<td>單元格3</td>

					<td>單元格4</td>

					<td>單元格5</td>

					<td>單元格6</td>

				</tr>

				<tr>

					<td>單元格1</td>

					<td>單元格2</td>

					<td>單元格3</td>

					<td>單元格4</td>

					<td>單元格5</td>

					<td>單元格6</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

雛形表格

通過代碼的運(yùn)行我們看到了一個(gè)表格的雛形。

2.我們通過使用borde元素在網(wǎng)頁(yè)中添加一個(gè)值就可以得到一個(gè)表格了，代碼截圖如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<thead>


				<tr>
					<th>標(biāo)題1</th>
					<th>標(biāo)題2</th>
					<th>標(biāo)題3</th>
					<th>標(biāo)題4</th>
					<th>標(biāo)題5</th>
					<th>標(biāo)題6</th>
				</tr>

			</thead>
			<tbody>
				<tr>
					<td>單元格1</td>
					<td>單元格2</td>
					<td>單元格3</td>
					<td>單元格4</td>
					<td>單元格5</td>
					<td>單元格6</td>
				</tr>
				<tr>
					<td>單元格1</td>
					<td>單元格2</td>
					<td>單元格3</td>
					<td>單元格4</td>
					<td>單元格5</td>
					<td>單元格6</td>
				</tr>
				<tr>
					<td>單元格1</td>
					<td>單元格2</td>
					<td>單元格3</td>
					<td>單元格4</td>
					<td>單元格5</td>
					<td>單元格6</td>
				</tr>

			</tbody>
		</table>
	</body>
</html>

成型表格

這樣子我們就完成了一個(gè)表格的設(shè)置了。

總結(jié)：

以上就是一個(gè)簡(jiǎn)單的有關(guān)于怎么在html網(wǎng)頁(yè)設(shè)計(jì)中如何制作表格的一個(gè)代碼和運(yùn)行的結(jié)果圖，當(dāng)然這個(gè)設(shè)置方法肯定不止一個(gè)小編只是分享最簡(jiǎn)單的給大家進(jìn)行一個(gè)了解，當(dāng)然如果我們要對(duì)表格進(jìn)行一個(gè)裝飾的話也是很簡(jiǎn)單的，更多的相關(guān)知識(shí)都可以在W3cschool中學(xué)習(xí)和了解。


HTML CSS 編程基礎(chǔ)

0 人點(diǎn)贊