中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用abbr屬性

在之前的示例中,或許你會(huì)覺(jué)得表頭中"Season Record (W-L)"用語(yǔ)音合成器來(lái)念實(shí)在太長(zhǎng)了一些,此時(shí),只要加上abbr屬性,我們就能縮短發(fā)音時(shí)的內(nèi)容,同時(shí)又為可視化瀏覽器保留了<th>單元格中的原始文字.

<table summary="This table is a chart of all Boston Red Sox World Series wins.">
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <th id="year">Year</th>
     <th id="opponent">Opponent</th>
     <th id="record" abbr="Record">Season Record (W-L)</th>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

我們加上了 abbr="Record" 后,屏幕閱讀器會(huì)讀出表頭使用簡(jiǎn)短的版本后的"Record".

<thead>,<tfoot>和<tbody>

在這里我還想提一下三個(gè)與表格相關(guān)的標(biāo)簽.它們不僅能為表格結(jié)構(gòu)提供更精確的語(yǔ)義,同時(shí)也為css提供額外的標(biāo)簽,讓你在設(shè)計(jì)表格行的樣式時(shí)不用為<tr>標(biāo)簽設(shè)計(jì)那么多的class.

引用一段W3C在HTML4.01規(guī)格中對(duì)這些標(biāo)簽的說(shuō)明(http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3):

引用:
表格行能夠以thead,tfoot和tbody標(biāo)簽分成表頭,表尾以及數(shù)目不限的表格主體.這種分類(lèi)法讓瀏覽器支持獨(dú)立卷動(dòng)表格主體的功能.打印長(zhǎng)表格時(shí),表頭和表尾也能在包含表格資料的每一頁(yè)上重復(fù)出現(xiàn).

因此,使用使用這種分類(lèi)方式也能讓支持獨(dú)立表格主體的瀏覽器使用者更容易閱讀表格內(nèi)容,特別是長(zhǎng)表格.

<thead>與<tfoot>必須出現(xiàn)在<tbody>之前,讓瀏覽器與其他設(shè)備能夠先載入這些內(nèi)容,以這種表格行分類(lèi)方式標(biāo)記表格看起來(lái)是這樣的:

<table>
  <thead>
    <tr>
      ...table header content...
    </tr>
  </thead>
  <tfoot>
    <tr>
      ...table footer content...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      ...table data row...
    </tr>
    <tr>
      ...table data row...
    </tr>
    <tr>
      ...table data row...
    </tr>
  </tbody>
</table>

你會(huì)發(fā)現(xiàn),表頭和表尾資料以<thead>和<tfoot>標(biāo)簽包圍,放在表格數(shù)據(jù)行之前.

就像我之前所說(shuō)的那樣,這些標(biāo)簽不僅能為表格提供更精確的語(yǔ)義,還能給css提供樣式錨點(diǎn)讓你為這些特定內(nèi)容設(shè)置css規(guī)則,而不必為每個(gè)<tr>設(shè)計(jì)那么多的class.

舉例來(lái)說(shuō),如果我們只想給數(shù)據(jù)區(qū)塊(以<tbody>標(biāo)記)設(shè)定與其他區(qū)塊不同的背景色.那么我們只需要寫(xiě)這樣一段css就能達(dá)到目的:

tbody {
  background-color: gray;
  }

如果沒(méi)有tbody標(biāo)簽的話(huà),我們需要為每個(gè)想要加上灰色背景的<tr>標(biāo)簽添加class屬性.有意義的標(biāo)記方式經(jīng)常能使之后用css設(shè)定樣式的工作變得十分輕松.這就是個(gè)好例子.

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [3] 下一頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [5]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。