HTML5是網頁開發中的一種新的標準,它在排版、樣式和交互方面都帶來了很多的改進。其中,排名表格是網頁中常用的一種元素,它可以展示結果排名、數據對比等。
在HTML5中,排名表格的代碼可以使用table、tr、td等標簽來實現,并可以加入一些樣式來美化表格的顯示效果。以下是一段簡單的排名表格代碼演示:
<table> <tr> <th>排名</th> <th>姓名</th> <th>分數</th> </tr> <tr> <td>1</td> <td>張三</td> <td>95</td> </tr> <tr> <td>2</td> <td>李四</td> <td>90</td> </tr> <tr> <td>3</td> <td>王五</td> <td>85</td> </tr> </table>在上面的代碼中,table標簽表示表格,tr標簽表示表格的行,td標簽表示表格的單元格。在表頭部分,使用了th標簽表示表格的標題單元格。這里的排名表格為3行3列,第一列為排名,第二列為姓名,第三列為分數。 在實際應用中,我們還可以為表格添加一些CSS樣式,改變表格的外觀和顯示效果,例如表格的邊框樣式、背景顏色、字體大小等。以下是一段帶有CSS樣式的排名表格代碼:
<style> table { border-collapse: collapse; margin-top: 20px; } td { border: solid 1px black; padding: 5px; text-align: center; } th { background-color: #e0e0e0; border: solid 1px black; padding: 5px; text-align: center; } </style> <table> <tr> <th>排名</th> <th>姓名</th> <th>分數</th> </tr> <tr> <td>1</td> <td>張三</td> <td>95</td> </tr> <tr> <td>2</td> <td>李四</td> <td>90</td> </tr> <tr> <td>3</td> <td>王五</td> <td>85</td> </tr> </table>在以上代碼中,我們使用了style標簽來定義CSS樣式,其中table標簽的border-collapse屬性表示邊框合并;td標簽的border屬性表示單元格邊框樣式;th標簽的background-color屬性表示標題單元格的背景色。 總之,在HTML5中,排名表格是一種常見的網頁元素,使用table、td和th標簽可以輕松實現排名表格的創建,并可以為其添加CSS樣式來美化顯示效果,使表格更加美觀和易于使用。
下一篇服務器不支持css