今天我們來講一下如何在HTML中制作漂亮的表格。表格是我們在網頁制作中經常使用到的一種工具,它可以幫助我們把數據以整齊有序的方式呈現出來,讓網頁顯得更加美觀和易讀。接下來我們就來看看一些漂亮的表格代碼。
首先,我們先來創建一個最基礎的表格:
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>18</td>
<td>女</td>
</tr>
</table>
在這段代碼中,我們可以看到<table>表示開始一個表格,<tr>表示開始一行,<th>表示表頭,<td>表示表格數據。這是我們最基本的表格,但是如果要讓表格變得更加漂亮,我們還需要加入一些CSS樣式來進行美化。
接下來,我們來看看如何使用CSS樣式來美化表格:<style>
table{
width: 100%;
border-collapse: collapse;
border: 1px solid #999;
font-size: 14px;
text-align: center;
}
th{
background: #eee;
border: 1px solid #999;
font-size: 16px;
color: #333;
}
td{
border: 1px solid #999;
font-size: 14px;
color: #333;
}
tr:hover{
background: #f5f5f5;
}
</style>
在這段代碼中,我們對表格進行了一些樣式上的調整。首先,我們給表格設置了寬度為100%。然后把表格邊框合并為一個,設置了字體大小和文本居中。接著,我們對表頭和表格數據進行了區分,表頭背景設置為灰色,并且字體顏色為黑色,表格數據邊框設置為1像素,并且字體大小也為14像素。最后,我們使用hover樣式,當我們鼠標滑過一行時,該行背景色變為灰色,增強了表格的可讀性。
通過以上這些簡單的CSS樣式調整,我們就可以讓我們的表格變得更加漂亮和易讀了。當然,還有很多其他的調整方法,讓我們的表格風格更加多樣化,就需要我們不斷嘗試和探索了!上一篇gitee vue
下一篇html js貪吃蛇代碼