資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用HTML建立課程表？
時間表是組織日常活動和提高效率的重要工具。在本文中，您將瞭解如何使用HTML建立一個簡單有效的每週時間表。此時間表將包括時間段、科目和午餐休息時間，並突出顯示週末為假期。
用於建立時間表的HTML標籤
用於建立表格的主要標籤是HTML元素中的<table>標籤。表格允許我們以行和列的形式表示結構化資料，這使得它們非常適合顯示時間表。
建立時間表所需的標籤列表
- HTML <table>標籤用於在HTML中定義表格。它充當所有資料和其他下方標籤的主要容器。
- HTML <tr>代表表格行。它用於定義表格中的一行。每一行都由包含表格資料的單元格組成。
- HTML <th>標籤定義表格中的表頭。預設情況下，<th>標籤中的文字為粗體且居中。
- HTML <td>代表表格資料。這是放置實際內容的標籤。
- HTML <colspan>與<td> 或 <th>一起使用，用於將資料跨越多個列。
- HTML <rowspan>與<td>或<th>一起使用，用於將資料跨越多個行。
示例
在這個例子中，我們將建立一個HTML標題表格。我們還使用了一些CSS屬性來使時間表更具吸引力。
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Time-Table Schedule</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
td {
color: red
}
th {
background-color: lightgreen;
}
td {
height: 50px;
}
.subject {
font-weight: bold;
color: green;
}
.holiday {
background-color: lightgrey;
font-weight: bold;
}
.lunch {
background-color: #FFC0CB;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Weekly TimeTable</h1>
<table>
<tr>
<th>Day</th>
<th>9.30-10.30</th>
<th>10.30-11.30</th>
<th>11.30-12.30</th>
<th>12.30-1.30</th>
<th>1.30-2.30</th>
<th>2.30-3.30</th>
<tr>
<th>Monday</th>
<td class="subject">Mathematics</td>
<td class="subject">Science</td>
<td class="subject">English</td>
<td class="lunch" rowspan=5>Lunch Break</td>
<td class="subject">Social Studies</td>
<td class="subject">Hindi</td>
</tr>
<tr>
<th>Tuesday</th>
<td class="subject">English</td>
<td class="subject">Social Studies</td>
<td class="subject">Hindi</td>
<td class="subject">Mathematics</td>
<td class="subject">Science</td>
</tr>
<tr>
<th>Wednesday</th>
<td class="subject">Mathematics</td>
<td class="subject">Hindi</td>
<td class="subject">English</td>
<td class="subject">Social Studies</td>
<td class="subject">Science</td>
</tr>
<tr>
<th>Thursday</th>
<td class="subject">Science</td>
<td class="subject">English</td>
<td class="subject">Social Studies</td>
<td class="subject">Mathematics</td>
<td class="subject">Hindi</td>
</tr>
<tr>
<th>Friday</th>
<td class="subject">English</td>
<td class="subject">Mathematics</td>
<td class="subject">Social Studies</td>
<td class="subject">Hindi</td>
<td class="subject">Science</td>
</tr>
<tr>
<th>Saturday</th>
<td class="holiday" colspan="6">Holiday</td>
</tr>
<th>Sunday</th>
<td class="holiday" colspan="6">Holiday</td>
</tr>
</table>
</body>
</html>
輸出
結論
使用HTML建立時間表是一個簡單的過程，有助於有效地管理每日日程安排。無論是學校還是大學，使用清晰的時間段、休息時間和假期來組織時間，對於保持活動按計劃進行都大有裨益。透過應用簡單的樣式和表格屬性，您可以進一步增強時間表的視覺吸引力和可用性。
更新於：2024年10月15日
169 次瀏覽
廣告