首頁 > web前端 > html教學 > HTML表格之簡單應用

HTML表格之簡單應用

迷茫
發布: 2017-01-17 10:41:14
原創
1598 人瀏覽過

在以前的網頁佈局中,我們會用表格進行佈局,但是隨著時間的增長,語言的進步,我們的表格佈局用的也就越來越少,現在大部分的網站都會使用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>
登入後複製

效果圖如下:

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基礎入門的課程中有這塊的實例,不會的小伙伴可以去參考一下!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板