App下載

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

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

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

步驟如下：

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

<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>

雛形表格

通過代碼的運行我們看到了一個表格的雛形。

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

<!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>

成型表格

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

總結(jié)：

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


HTML CSS 編程基礎(chǔ)

0 人點贊