CSS簡單表格制作日歷
CSS是一種用于樣式表設計的技術,可以用于創建各種類型的網站和應用程序。今天,我們將使用CSS來創建一個簡單表格,用于顯示日歷。
首先,我們需要創建一個HTML文件,其中包含我們需要的表單和日歷表格。在HTML中,我們可以使用表格標簽和CSS樣式表來創建表格。例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS日歷表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
th, td {
border: 1px solid #ccc;
padding: 8px;
th {
background-color: #f2f2f2;
color: #444444;
td {
background-color: #ddd;
color: #444444;
</style>
</head>
<body>
<table>
<tr>
<th>日期</th>
<th>內容</th>
</tr>
<tr>
<td>1月1日</td>
<td>早上9點到下午3點</td>
</tr>
<tr>
<td>1月2日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月3日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月4日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月5日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月6日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月7日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月8日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月9日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月10日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月11日</td>
<td>上午9點到下午3點</td>
</tr>
<tr>
<td>1月12日</td>
<td>上午9點到下午3點</td>
</tr>
</table>
</body>
</html>
上面的代碼創建了一個簡單的表格,其中包含12個單元格。每個單元格都包含一個日期,以及相應的內容。我們可以使用CSS樣式表來更改表格的外觀和布局。例如,我們可以更改單元格的背景顏色,字體大小和對齊方式。
下面是一個使用CSS來創建日歷表格的示例:
```css
table {
border-collapse: collapse;
width: 100%;
th, td {
border: 1px solid #ccc;
padding: 8px;
background-color: #f2f2f2;
color: #444444;
background-color: #ddd;
color: #444444;
.日歷 {
width: 80%;
padding: 10px;
background-color: #fff;
.month {
margin-bottom: 10px;
.day {
margin-bottom: 10px;
.active {
background-color: #007bff;
在這個示例中,我們使用了一個名為“日歷”的元素來顯示所有的日期。我們使用CSS的“.month”屬性來更改日歷的寬度,并使用“.day”屬性來更改日歷的單元格寬度和背景顏色。我們還添加了一個名為“active”的元素,用于顯示當前日期。
現在,我們可以使用HTML和CSS來創建一個簡單的日歷表格,可以輕松地顯示日程安排。