HTML5漂亮表格代碼
HTML5提供了更多的標記標簽來創(chuàng)建漂亮的表格，使得網(wǎng)頁設計變得更加簡單和有趣。在這里，我們將介紹一些常用的HTML5表格代碼，用于創(chuàng)建漂亮的表格。
| 姓名 | 年齡 | 郵箱 |
|---|
| 張三 | 25 | zhangsan@example.com |
| 李四 | 30 | lisi@example.com |
| 王五 | 35 | wangwu@example.com |
以上代碼是一個簡單的HTML5表格，它展示了三個人的姓名、年齡和郵箱。該表格包含了一個表頭和三個表格行，每行由三列組成。
如果您想要讓表格看起來更美觀，您可以使用CSS樣式表來美化它。以下是一個示例CSS樣式表：
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #ddd;
font-weight: bold;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
以上CSS樣式表將表格的寬度設置為100%，使其占據(jù)整個頁面。它還將表格單元格之間的邊框設置為1像素，以及單元格的內(nèi)邊距設置為8像素。表頭單元格被添加了粗體字體，背景色也變?yōu)榱嘶疑?
如果您想顯示更多的數(shù)據(jù)，請使用HTML5中的colspan和rowspan屬性將單元格合并為更大的單元格。例如，以下代碼將創(chuàng)建一個具有合并單元格的表格：
| 基本信息 | 聯(lián)系信息 |
|---|
| 姓名 | 年齡 | 郵箱 |
| 張三 | 25 | zhangsan@example.com |
| 男 |
以上代碼包括了一個表頭行和兩個數(shù)據(jù)行。第一個數(shù)據(jù)行是所有數(shù)據(jù)的標題。第二個數(shù)據(jù)行包括了合并的單元格，其中單元格張三跨行并且單元格郵箱跨了兩列。
總結
HTML5提供了許多有用的標記標簽來創(chuàng)建漂亮的表格，可以通過CSS樣式表使表格看起來更美觀。并且，如果您需要將多個單元格合并為一個單元格，可以使用colspan和rowspan屬性來實現(xiàn)。
