Html學習之十六（表格與表單學習--課程表制作）
阿新 • • 發佈：2019-03-31
居中 htm meta rowspan title 結果 utf-8 使用 class
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>課程表</title> <style> table{/*設置外部相關屬性,不要設置內部屬性*/ width: 500px; height: 300px; border: 3px black solid; margin: 100px auto; /*padding: 20px;*/ border-collapse: collapse;/*合並邊框屬性 ，使邊框之間沒有間距*/ } td,th{/*設置內部相關屬性,不要設置外部屬性*/ border: 1px black solid; padding: 0px 22px; /*padding: 20px;*/ /*margin: 20px;*/ } .td1{ background: #A9A9A9; font-weight: bold; } th{ background: brown; font-size:20px; color: aliceblue; } </style> </head> <body> <table><!--table是塊狀元素的--> <tr><!--使用th會使12345加粗並居中--> <th colspan="6">課程表</th><!--和並列即是合並的是將6列合為1列使用colspan--> <!--<th>2</th> <th>3</th> <th>4</th> <th>5</th>--> </tr> <tr> <td class="td1"></td> <td class="td1">周一</td> <td class="td1">周二</td> <td class="td1">周三</td> <td class="td1">周四</td> <td class="td1">周五</td> </tr> <tr> <td rowspan="2" class="td1">上午</td><!--合並行使用rowspan，這是合並兩行--> <td>數學</td> <td>語文</td> <td>外語</td> <td>體育</td> <td>歷史</td> </tr> <tr> <td>數學</td> <td>語文</td> <td>外語</td> <td>體育</td> <td>歷史</td> </tr> <tr> <td rowspan="2" class="td1">下午</td><!--合並行使用rowspan--> <td>數學</td> <td>語文</td> <td>外語</td> <td>體育</td> <td>歷史</td> </tr> <tr> <td>數學</td> <td>語文</td> <td>外語</td> <td>體育</td> <td>歷史</td> </tr> </table> </body> </html>
結果：
Html學習之十六（表格與表單學習--課程表制作）