創(chuàng)建HTML和CSS文件,并填寫(xiě)基本內(nèi)容
首先,我們需要?jiǎng)?chuàng)建一個(gè)HTML文件,并使用標(biāo)簽引入一個(gè)獨(dú)立的CSS文件。在HTML文件中,添加一個(gè)標(biāo)簽來(lái)創(chuàng)建表格,并填寫(xiě)表格的基本內(nèi)容。```html
首先,我們需要?jiǎng)?chuàng)建一個(gè)HTML文件,并使用標(biāo)簽引入一個(gè)獨(dú)立的CSS文件。在HTML文件中,添加一個(gè)
| 姓名 | 年齡 | 城市 |
|---|---|---|
| 張三 | 25 | 北京 |
| 李四 | 30 | 上海 |
```
設(shè)置表格的整體寬度
為了控制整個(gè)表格的寬度,我們可以使用CSS的`width`屬性來(lái)設(shè)置。在CSS文件中,為
| 和 | 加上padding 為了增加單元格內(nèi)部的間距,使表格更具可讀性,我們可以使用CSS的`padding`屬性為 | 和 | 標(biāo)簽添加內(nèi)邊距。在CSS文件中,為這兩個(gè)標(biāo)簽添加樣式,并設(shè)置`padding`屬性的值。 ```css th, td { padding: 10px; } ``` 為表頭設(shè)置樣式表頭通常需要突出顯示,以便與其他行區(qū)分開(kāi)來(lái)。我們可以使用CSS的各種屬性來(lái)為表頭設(shè)置樣式。在CSS文件中,為 | 標(biāo)簽添加樣式。 ```css th { background-color: #f1f1f1; font-weight: bold; } ``` 為其中一行設(shè)置背景顏色有時(shí)候,我們希望給表格的某一行設(shè)置特殊的背景顏色,以便于突出顯示。我們可以使用CSS的`background-color`屬性為指定行添加背景顏色。在CSS文件中,為 |
|---|---|
| 標(biāo)簽添加樣式。 ```css td { text-align: right; } ``` 設(shè)置空的格子為隱藏如果表格中存在某些空的格子,我們可以使用CSS的`visibility`屬性將其隱藏起來(lái)。在CSS文件中,為 | 標(biāo)簽添加樣式。 ```css td:empty { visibility: hidden; } ``` 設(shè)置邊框合并有時(shí)候,我們希望兩個(gè)相鄰的單元格的邊框合并成一個(gè),以達(dá)到更美觀的效果。我們可以使用CSS的`border-collapse`屬性來(lái)實(shí)現(xiàn)邊框合并。在CSS文件中,為 |