和CSS讓我們可以更好地排版網頁內容。使用div來組織內容的結構，用CSS來定義樣式和布局。 下面我們來看看如何用div和CSS來創建一個簡單的課表。首先，我們需要使用pre標簽來定義一個格式化的代碼段，以便在頁面上展示課表布局的樣式。代碼如下：

.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #ccc;
padding: 5px;
}

以上代碼定義了三個CSS類，分別為table、row和cell。這些類將用于創建課表的表格結構。其中，table類將使表格以表格方式顯示；row類定義了每個表格行的外觀；cell類定義了表格單元格的外觀和樣式。 接下來，請看下面的代碼段，它定義了一個包含列標題和多個課程的課表。這些課程顯示在每周不同的時間，分別由不同的顏色表示：

 
Monday
Tuesday
Wednesday
Thursday
Friday
8:00 - 9:00
Math
 
 
Science
 
9:00 - 10:00
 
 
English
 
Social Studies
10:00 - 11:00
 
Art
 
 
 
11:00 - 12:00
Physical Education
 
 
 
 

以上代碼創建了一個名為table的div元素，其中包含數個名為row的div行元素，每個行元素包含名為cell的div單元格元素。單元格中的內容表示不同的課程，并由不同的背景顏色表示。此外，還有表示周一至周五的列名。 在CSS中定義好樣式后，在HTML中使用div元素來組織內容，就可以創建課表了。在CSS中，通過定義一些常見的類，可以很容易地為我們的課表添加樣式、顏色和布局效果，使得整個頁面看起來更加有條理、清晰易懂。