HTML表格是網頁設計中常用的元素之一。它可以用來展示表格數據,也可以用來布局網站頁面。下面是一些HTML表格代碼的例子。
首先,我們來看一個最基本的HTML表格代碼,它包含一個表頭和一個單元格:
<table> <tr> <th>表頭</th> </tr> <tr> <td>單元格</td> </tr> </table>上述代碼中,使用了table、tr、th和td等標簽,表示表格、行、表頭和單元格。其中,th和td標簽是用來定義表頭和單元格的。 接下來,我們來看一個更加復雜的HTML表格,它有多個行和列,以及合并的表格單元格:
<table> <tr> <th colspan="2">頭部</th> <th rowspan="2">左側</th> </tr> <tr> <td>左上</td> <td>右上</td> </tr> <tr> <td>左下</td> <td>右下</td> <td colspan="2">底部</td> </tr> </table>上述代碼中,我們使用了colspan和rowspan屬性來合并表格單元格,同時還指定了表格的頭部和底部。 最后,我們來看一個HTML表格和CSS樣式相結合的例子,通過添加樣式可以美化表格的外觀:
<table class="my-table"> <tr> <th>名稱</th> <th>價格</th> </tr> <tr> <td>蘋果</td> <td>$1.00</td> </tr> <tr> <td>香蕉</td> <td>$0.50</td> </tr> </table> <style> .my-table { border-collapse: collapse; } .my-table th, .my-table td { border: 1px solid #ccc; padding: 5px; text-align: center; } .my-table th { background-color: #f2f2f2; } .my-table tr:nth-child(even) { background-color: #f9f9f9; } </style>上述代碼中,我們使用了一個樣式類“my-table”來對表格進行樣式設置,包括邊框、填充、文本對齊、背景顏色等等。 以上是HTML表格代碼的一些例子,可以幫助你更好地理解和使用HTML表格元素。