表格還是需要添加一些標簽進行優化,可以添加標題和摘要。代碼如下:
摘要
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化),使搜索引擎更好的讀懂表格內容,還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法:<table summary="表格簡介文本">
標題
用以描述表格內容,標題的顯示位置:表格上方。
語法:
<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>認識table表標簽</title> <style type="text/css"> table tr td,th{ border:1px solid #000; } </style> </head> <body> <table summary="本表格記錄2012年到2013年庫存記錄,記錄包括U盤和耳機庫存量"> <caption>2012年到2013年庫存記錄</caption> <tr> <th>產品名稱 </th> <th>品牌 </th> <th>庫存量(個) </th> <th>入庫時間 </th> </tr> <tr> <td>耳機 </td> <td>聯想 </td> <td>500</td> <td>2013-1-2</td> </tr> <tr> <td>U盤 </td> <td>金士頓 </td> <td>120</td> <td>2013-8-10</td> </tr> <tr> <td>U盤 </td> <td>愛國者 </td> <td>133</td> <td>2013-3-25</td> </tr> </table> </body> </html>
效果: