HTML设计显示表格
生活随笔
收集整理的這篇文章主要介紹了
HTML设计显示表格
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML設(shè)計(jì)顯示表格
? ? ? ? ? 表格在最初的HTML中，僅僅是用于存放各種數(shù)據(jù)的，因此，表格有很多與數(shù)據(jù)相關(guān)的標(biāo)記，非常方便。
<span style="font-size:24px;"><html><head><title>年度收入</title><style><!----></style></head><body><table summary="This table shows the yearly income for years 2004 through 2007" border="1"><caption>年度收入 2004-2007</caption><tr><th></th><th scope="col">2004</th><th scope="col">2005</th><th scope="col">2006</th><th scope="col">2007</th></tr><tr><th scope="row">捐款</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">撥款</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">投資</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">募捐</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">銷售</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr></table></body> </html> </span> ? ? ? ? ??代碼如上，在<table>標(biāo)記中，使用border屬性設(shè)置了表格的外框，summary屬性，該屬性的值用于概括表格的內(nèi)容，注意，在瀏覽器頁(yè)面中它是不可見的，但是，隨意搜索引擎非常重要。? ? ? ? ??<caption>標(biāo)記的作用就是設(shè)置表格的大標(biāo)題，該標(biāo)記可以放在<table>與</table>之間的任意位置，不過(guò)通常放在第一行。
? ? ? ? ??此外，如果設(shè)置表格標(biāo)題的位置，添加CSS屬性就可以實(shí)現(xiàn)，但是，<caption>標(biāo)記有專門的屬性caption-side，用于調(diào)整表格標(biāo)題的位置，但是，該屬性只在Firefox中有效，IE不支持。
<span style="font-size:24px;">table{caption-side:bottom; }</span>? ? ? ? ??<th>標(biāo)記設(shè)置表格中，行或者列的名稱，其中，<th>標(biāo)記的scope屬性是用來(lái)區(qū)分行名稱和列名稱的，分別設(shè)置scope的值為row或者col即可。
? ? ? ? ??在HTML頁(yè)面中應(yīng)該盡量遵循表格的標(biāo)準(zhǔn)標(biāo)記，養(yǎng)成良好的習(xí)慣，并適當(dāng)?shù)乩胻ab、空格和空行來(lái)提高代碼的可讀性，降低后期的維護(hù)成本。
總結(jié)
以上是生活随笔為你收集整理的HTML设计显示表格的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTML设计显示表单
- 下一篇： Nginx设置本地浏览器缓存