HTML5中的表格自適應功能可以讓我們在不同設備上展示相同的數據表格,無論是在電腦上還是一些移動設備上都具有好的可視性和用戶體驗。下面是示例代碼:
<table> <caption>自適應表格</caption> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> </tr> </tbody> </table>
我們可以讓表格自適應屏幕大小,只需要在CSS中設置表格的寬度為100%。同時,我們可以使用CSS媒體查詢來適配不同尺寸的設備,例如在移動設備上,將表格的字體大小調整到更小以適應小屏幕:
<style> table { width: 100%; } th, td { padding: 10px; text-align: left; } @media screen and (max-width: 600px) { td, th { font-size: 12px; padding: 5px; } } </style>
通過以上兩段代碼的實現,我們就可以讓表格在不同設備上有著良好的展示效果和用戶使用體驗。