在我們的一個(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í)和了解。