佳木斯湛栽影视文化发展公司
主頁(yè) > 知識(shí)庫(kù) > HTML表格布局實(shí)例講解

HTML表格布局實(shí)例講解
熱門(mén)標(biāo)簽：網(wǎng)站建設(shè) 檢查注冊(cè)表項(xiàng) 阿里云 美圖手機(jī) 使用U盤(pán)裝系統(tǒng) 智能手機(jī) 硅谷的囚徒呼叫中心 百度競(jìng)價(jià)點(diǎn)擊價(jià)格的計(jì)算公式

HTML 文檔中的元素是一個(gè)接著一個(gè)排列的，只是簡(jiǎn)單地在在塊級(jí)元素的前后加上拆行，是一種流水布局。但是，我們所見(jiàn)到的 Web 頁(yè)面按照一定的規(guī)則布局排版的（通常是多列的），所以就要借助一定的方法來(lái)實(shí)現(xiàn)這種布局，通常的解決方案是：使用區(qū)塊元素 <div> 或 表格（<table>）來(lái)布局 Web 頁(yè)面的內(nèi)容。

使用表格進(jìn)行布局，是一種較老的布局解決方案。并不推薦使用，我們應(yīng)該總是使用表格來(lái)顯示表格化的數(shù)據(jù)。

HTML 文檔

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <!-- 鏈接到外部樣式表 -->   
  6.     <link rel="stylesheet" href="css/mystyle.css">   
  7.     <title>Island estaurant</title>   
  8. </head>   
  9. <body>   
  10.     <table id="container">   
  11.         <!-- 頭部 -->   
  12.         <tr>   
  13.             <td id="header" colspan="2">   
  14.                 <h1>點(diǎn)菜系統(tǒng)</h1>   
  15.             </td>   
  16.         </tr>   
  17.         <!-- 主體 -->   
  18.         <tr>   
  19.             <!-- 菜單 -->   
  20.             <td id="menu">   
  21.                 <b>菜品</b><br>   
  22.                 <div id="dishes">   
  23.                     小雞燉蘑菇<br>   
  24.                     家常豆腐<br>   
  25.                     酸辣土豆絲<br>   
  26.                 </div>   
  27.             </td>   
  28.             <!-- 內(nèi)容 -->   
  29.             <td id="content">   
  30.                 小雞燉蘑菇：<br>   
  31.                 幼雞一只   
  32.             </td>   
  33.         </tr>   
  34.         <!-- 尾部 -->   
  35.         <tr>   
  36.             <td id="footer" colspan="2">世俗孤島的餐廳</td>   
  37.         </tr>   
  38.     </table>   
  39. </body>   
  40. </html>   
  41.   

CSS 文件

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*整個(gè)點(diǎn)餐系統(tǒng)的界面*/  
  2. #container   
  3. {   
  4.     width: 600px;   
  5.     margin: 100px;   
  6.     /*取消單元格邊框之間的邊距*/  
  7.     border-spacing: 0;   
  8. }   
  9. /*點(diǎn)餐系統(tǒng)界面的頭部*/  
  10. #header  
  11. {   
  12.     background-color: red;   
  13.     text-align: center;   
  14. }   
  15. h1   
  16. {   
  17.     margin-bottom: 0px;   
  18. }   
  19. /*點(diǎn)餐系統(tǒng)界面的菜單*/  
  20. #menu  
  21. {   
  22.     background-color: #FFD700;   
  23.     height: 200px;   
  24.     width: 150px;   
  25. }   
  26. #dishes  
  27. {   
  28.     padding-top: 10px;   
  29.     padding-left: 10px;   
  30.     line-height: 20px;   
  31. }   
  32. /*點(diǎn)餐系統(tǒng)界面的菜品詳情*/  
  33. #content   
  34. {   
  35.     background-color: gray;   
  36.     height: 200px;   
  37.     width: 450px;   
  38. }   
  39. /*點(diǎn)餐系統(tǒng)界面的尾部*/  
  40. #footer  
  41. {   
  42.     background-color: blue;   
  43.     height: 25px;   
  44.     text-align: center;   
  45. }  

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

標(biāo)簽：山南 賀州 黃山 湘潭 懷化 煙臺(tái) 通遼 湖北

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML表格布局實(shí)例講解》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢(xún)

    • 400-1100-266
    疏附县| 阿鲁科尔沁旗| 松原市| 毕节市| 那曲县| 绥德县| 横峰县| 台南县| 菏泽市| 靖边县| 七台河市| 垣曲县| 徐闻县| 永平县| 依安县| 平凉市| 利津县| 措美县| 大渡口区| 安平县| 九江市| 龙海市| 平邑县| 阿尔山市| 桐庐县| 锡林浩特市| 普陀区| 成安县| 云龙县| 泗洪县| 天津市| 中江县| 西华县| 和硕县| 奉化市| 陇川县| 北辰区| 华安县| 双牌县| 罗平县| 沁源县|