App下載

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

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

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

步驟如下:

1.首先我們向在Web前端開(kāi)發(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>

雛形表格

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


2.我們通過(guò)使用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í)和了解。


0 人點(diǎn)贊