在以前的網頁佈局中,我們會用表格進行佈局,但是隨著時間的增長,語言的進步,我們的表格佈局用的也就越來越少,現在大部分的網站都會使用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基礎入門的課程中有這塊的實例,不會的小伙伴可以去參考一下! |
---|