如何用 CSS 制作課程表
課程表是展示課程安排和時(shí)間表的重要工具，通常需要包括課程名稱、授課教師、授課時(shí)間、學(xué)生人數(shù)等信息。下面介紹幾種用 CSS 制作課程表的方法。
方法一：表格布局
可以使用表格布局來制作課程表。表格可以使用 CSS 進(jìn)行布局，可以通過設(shè)置表格的行高、列寬、邊框樣式、內(nèi)邊距等屬性來實(shí)現(xiàn)。表格中的單元格也可以使用 CSS 進(jìn)行布局，可以通過設(shè)置字體、顏色、對齊方式等屬性來實(shí)現(xiàn)。
下面是一個(gè)使用表格布局制作的課程表示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>課程表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #ddd;
font-size: 16px;
}
</style>
</head>
<body>
<table>
<tr>
<th>課程1</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
<tr>
<th>課程2</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
<tr>
<th>課程3</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
</table>
</body>
</html>
在這個(gè)示例中，我們使用了 `table` 元素來創(chuàng)建表格，并設(shè)置了表格的行高、列寬、邊框樣式、內(nèi)邊距等屬性。`th` 元素為表格中的單元格設(shè)置了背景顏色、字體大小和對齊方式。
方法二：塊狀布局
可以使用塊狀布局來制作課程表。塊狀布局使用一個(gè) `div` 元素來創(chuàng)建表格，并通過 CSS 設(shè)置表格的邊框、內(nèi)邊距、字體等屬性來實(shí)現(xiàn)。表格中的單元格也可以使用 CSS 進(jìn)行布局，可以通過設(shè)置字體、顏色、對齊方式等屬性來實(shí)現(xiàn)。
下面是一個(gè)使用塊狀布局制作的課程表示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>課程表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
div.table {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="table">
<tr>
<th>課程1</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
<tr>
<th>課程2</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
<tr>
<th>課程3</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
</div>
</body>
</html>
在這個(gè)示例中，我們使用了 `div.table` 類來創(chuàng)建表格，并設(shè)置了表格的邊框、內(nèi)邊距、字體等屬性。`th` 元素為表格中的單元格設(shè)置了背景顏色、字體大小和對齊方式。
方法三：偽類樣式
可以使用偽類樣式來制作課程表。可以使用 `table` 偽類元素和 `tr` 偽類元素來創(chuàng)建表格和單元格，并通過 CSS 設(shè)置字體、顏色、對齊方式等屬性來實(shí)現(xiàn)。
下面是一個(gè)使用偽類樣式制作的課程表示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>課程表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-size: 16px;
}
</style>
</head>
<body>
<table>
<tr>
<th>課程1</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
<tr>
<th>課程2</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
<tr>
<th>課程3</th>
<th>授課時(shí)間</th>
<th>授課教師</th>
</tr>
</table>
</body>
</html>
在這個(gè)示例中，我們使用了 `tr:nth-child(even)` 偽類來設(shè)置表格中的偶數(shù)行的背景顏色，通過 `th` 偽類來設(shè)置單元格的背景顏色、字體大小和對齊方式。
這些方法都可以制作出漂亮的課程表，你可以根據(jù)自己的需求選擇合適的方法來制作課程表。