<fieldset id="0m0yu"></fieldset>
  • 
    
  • <cite id="0m0yu"><menu id="0m0yu"></menu></cite>
    <fieldset id="0m0yu"><menu id="0m0yu"></menu></fieldset>
    <sup id="0m0yu"></sup>
  • 咨詢電話:024-31891684

    網(wǎng)站建設(shè)|注冊|登錄 | 易勢大連分公司

    沈陽網(wǎng)站制作易勢最專業(yè)

    ,必須設(shè)置"/>
    ,網(wǎng)頁設(shè)計(jì)
    ,企業(yè)網(wǎng)站設(shè)計(jì)">網(wǎng)站設(shè)計(jì)
    網(wǎng)站制作 網(wǎng)絡(luò)營銷 網(wǎng)站維護(hù) 空間域名 網(wǎng)站案例
     

    html中10個與表格(table)相關(guān)標(biāo)簽當(dāng)前位置:首頁>主要服務(wù)>網(wǎng)站制作>html

    最近在網(wǎng)絡(luò)上看到幾篇關(guān)于HTML表格的使用的文章

    ,覺得很有用,決定記錄下來。很多人希望永遠(yuǎn)不使用table標(biāo)簽
    ,但是這是錯誤的!這個建議只是針對使用HTML表格來定義網(wǎng)頁的布局
    ,但是表格在排列數(shù)據(jù)信息行和列方面非常完美
    ,而且如果一定要在一個頁面上顯示表列數(shù)據(jù),就不得不使用table了
    !但是我們無視了用于table的某些HTML標(biāo)簽的存在并且不知道該如何正確的使用它們。

    HTML有10個表格相關(guān)標(biāo)簽

    。下面是一個帶有簡介的列表
    ,但是首先,文檔要被正確的定義在HTML 4.01/XHTML 1或HTML 5下面:

    • 1
      、<caption> 定義表格標(biāo)題
    • 2、<col> 為表格的列定義屬性
    • 3
      、<colgroup> 定義表格列的分組
    • 4
      、<table> 定義表格
    • 5、<tbody> 定義表格主體
    • 6
      、<td> 定義一個單元格
    • 7
      、<tfoot> 定義表格的表注(底部)
    • 8
      、<th> 定義表格的表頭
    • 9
      、<thead> 定義表格的表頭
    • 10、<tr> 定義表格的行

    一個基本的表格結(jié)構(gòu)如下:

    它包含一個標(biāo)題

    、頭部
    、主體和底部
    。正確的HTML元素順序是:

    1. <table>
    2. <caption>
    3. <thead>
    4. <tfoot>
    5. <tbody>

    也可以使用<col><colgroup>來定義表格的列或?yàn)榱蟹纸M:

    1. <table>
    2. <caption>
    3. <colgroup>
    4. <col>
    5. <thead>
    6. <tfoot>
    7. <tbody>

    下面是一個正確的表格結(jié)構(gòu)實(shí)例:

    <tableborder="1">

          <caption>Table caption here</caption>

          <colgroup span="1" style="background:#DEDEDE;"/>

          <colgroup span="2" style="background:#EFEFEF;"/> 

          <!-- Table Header-->

          <thead>

          <tr>

                      <th>Head 1</th>

                      <th>Head 2</th>

                      <th>Head 3</th>

                </tr>

          </thead>

     

          <!-- Table Footer-->

          <tfoot>

                <tr>

                      <td>Foot 1</td>

                      <td>Foot 2</td>

                      <td>Foot 3</td>

                </tr>

          </tfoot

          <!-- Table Body-->

          <tbody>

                <tr>

                      <td>A</td>

                      <td>B</td>

                      <td>C</td>

                </tr>

                <tr>

                      <td>D</td>

                      <td>E</td>

                      <td>F</td>

                </tr>

          </tbody>

    </table>

    在瀏覽器中的結(jié)果如下圖所示:

     

    關(guān)于表格的一些技巧

    • 根據(jù)w3schools的解釋和用法,在一個table定義中
      <tfoot>元素必須出現(xiàn)在<tbody>之前,這樣
      ,瀏覽器就可以在接受到所有數(shù)據(jù)之前呈現(xiàn)表注了
      。另外
      ,如果不是這個順序,將不能通過W3C的HTML4和XHTML驗(yàn)證
      ,無論你聲明哪種DTD
    • 在HTML 4.01 中,表格的alignbgcolor屬性不贊成使用,所以在HTML 5中不再有任何table的屬性被支持(事實(shí)上
      ,在XHTML 1.0 Strict DTD中已經(jīng)不支持”align”和”bgcolor”屬性了)
    • 所有主流瀏覽器都支持<colgroup> 標(biāo)簽,但是Firefox
      、Chrome 以及Safari 僅支持colgroup 元素的span 和width 屬性;
    • css中的empty-cells:show|hide 可以設(shè)定空單元格是否顯示邊框
      。注意
      ,這個需要設(shè)置在table而不是td/th中。IE6中比較容易遇到該問題
    • css中的border-collapse:collapse | separate 可以設(shè)置表格的邊框是否被合并成一個邊框
    • css中的border-spacing屬性等效于table的cellspacing屬性

    上一條資訊|返回欄目頁|下一條資訊

    沈陽網(wǎng)站制作--網(wǎng)站前臺效果

    產(chǎn)品環(huán)形展示
    【書角效果】簡單的右上角書角
    【banner效果】簡單的JS幻燈片
    jQuery打造的漂亮的圖片列表布局動畫切換效果jQuery 超實(shí)用的圖片列表布局切換效果,這個效果相當(dāng)實(shí)用
    無限級可刷新Js樹型菜單此代碼內(nèi)容為無限級可刷新Js樹型菜單 dTree
    ,屬于網(wǎng)站制作常用代碼

    易勢網(wǎng)站制作

    ,以DIV+CSS為主,js/jQuery為輔
    ,制作利于優(yōu)化,頁面美觀的優(yōu)質(zhì)網(wǎng)站

    top

    網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)