HTML设计显示表格
生活随笔
收集整理的這篇文章主要介紹了
HTML设计显示表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML設計顯示表格
? ? ? ? ? 表格在最初的HTML中，僅僅是用于存放各種數據的，因此，表格有很多與數據相關的標記，非常方便。
<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>標記中，使用border屬性設置了表格的外框，summary屬性，該屬性的值用于概括表格的內容，注意，在瀏覽器頁面中它是不可見的，但是，隨意搜索引擎非常重要。? ? ? ? ??<caption>標記的作用就是設置表格的大標題，該標記可以放在<table>與</table>之間的任意位置，不過通常放在第一行。
? ? ? ? ??此外，如果設置表格標題的位置，添加CSS屬性就可以實現，但是，<caption>標記有專門的屬性caption-side，用于調整表格標題的位置，但是，該屬性只在Firefox中有效，IE不支持。
<span style="font-size:24px;">table{caption-side:bottom; }</span>? ? ? ? ??<th>標記設置表格中，行或者列的名稱，其中，<th>標記的scope屬性是用來區分行名稱和列名稱的，分別設置scope的值為row或者col即可。
? ? ? ? ??在HTML頁面中應該盡量遵循表格的標準標記，養成良好的習慣，并適當地利用tab、空格和空行來提高代碼的可讀性，降低后期的維護成本。
總結
以上是生活随笔為你收集整理的HTML设计显示表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML设计显示表单
- 下一篇： Nginx设置本地浏览器缓存