HTML表格之簡單應用-html教學-PHP中文網

首頁

web前端

html教學

HTML表格之簡單應用

迷茫

Jan 17, 2017 am 10:41 AM

html table th tr

在以前的網頁佈局中，我們會用表格進行佈局，但是隨著時間的增長，語言的進步，我們的表格佈局用的也就越來越少，現在大部分的網站都會使用div+css進行佈局，搜尋引擎對表格佈局的並不是很友好，在抓取網站的內容時，div+css佈局能更好的被搜尋引擎抓取，那麼我們今天來談下表格佈局。

首先，我們要知道表格的標籤有哪些？

、、

、	我們下面寫個例子，然後把這些標籤都運用到例子裡面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <tr> <th>ID</th> <th>名称</th> <th>价格</th> <th>库存</th> <th>上线时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>相机</td> <td>1499</td> <td>999</td> <td>2015.6.8</td> <td>修改删除</td> </tr> </table> </body> </html> 登入後複製效果圖如下：這樣的效果並不是很好看的，我們繼續給表格完善一下設定固定的寬高，與邊框，邊框是一條實線 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ width: 500px; height:100px; text-align: center; } td{ width:90px; } </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th>ID</th> <th>名称</th> <th>价格</th> <th>库存</th> <th>上线时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>相机</td> <td>1499</td> <td>999</td> <td>2015.6.8</td> <td>修改删除</td> </tr> </table> </body> </html> 登入後複製這樣的話，表格就會好看很多了，當然我們裡面還有屬性， colspan rowspan 如果製作個人履歷的話，用表格佈局，我們就會用到這兩個屬性，合併行與單元格,這個在php中文網的html基礎入門的課程中有這塊的實例，不會的小伙伴可以去參考一下！

、

我們下面寫個例子，然後把這些標籤都運用到例子裡面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>

登入後複製

效果圖如下：

HTML表格之簡單應用

這樣的效果並不是很好看的，我們繼續給表格完善一下

設定固定的寬高，與邊框，邊框是一條實線

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
width: 500px;
height:100px;
text-align: center;
}
td{
width:90px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>

登入後複製

這樣的話，表格就會好看很多了，當然我們裡面還有屬性，

colspan rowspan 如果製作個人履歷的話，用表格佈局，我們就會用到這兩個屬性，合併行與單元格,這個在php中文網的html基礎入門的課程中有這塊的實例，不會的小伙伴可以去參考一下！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn