CSS學習——表格
阿新 • • 發佈：2018-12-30
前言
在很多的網頁中我都會見到表格，也就是我們常見的Excel表。比如說使用者表、成績表等在網頁中的顯示， 作用是展示資料。
表格的結構
<table>
<tr>
<td></td>
</tr>
</table>
簡單實現一個表格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1px" width="50%" align="center" cellspacing="0"> <!--tr表示行--> <tr> <!--td表示列--> <td>id</td> <td>使用者名稱</td> <td>性別</td> </tr> <tr> <td>1</td> <td>user1</td> <td>男</td> </tr> <tr> <td>2</td> <td>user2</td> <td>女</td> </tr> <tr> <td>3</td> <td>user3</td> <td>保密</td> </tr> </table> </body> </html>
複製上面的程式碼執行在網頁中，我們就能實現一個簡單的表格了。
水平合併單元格
實現水平合併單元格要在合併的第一個單元格中使用colspan="合併單元格個數"屬性，注意合併單元格必須加上自己，從第一個單元格開始數。
垂直合併單元格
實現垂直單元格合併要在合併的第一個單元格中使用rowspan="合併單元格個數"屬性，注意合併單元格必須加上自己，從第一個單元格開始數。
設定單元格之間的間隔
設定單元格之間的間隔使用cellspacing="0"屬性，一般設定成0，除非有特別的需求。
設定單元格內容居中
設定單元格內容居中align="center"屬性。
利用表格知識實現課程表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>課程表</title> <style type="text/css"> table{ margin: 0 auto; border-spacing: 0; width: 50%; } td{ border: 1px solid #666; } </style> </head> <body> <table> <!--標題--> <tr> <td colspan="7" align="center">課程表</td> </tr> <!--日期--> <tr> <td></td> <td></td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> <!--課程安排--> <!--第一節課--> <tr> <td rowspan="4">上午</td> <td width="50px">1</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="50px">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="50px">3</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="50px">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="7" align="center">午休</td> </tr> <tr> <td rowspan="4" align="center">下午</td> <td width="50px">1</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="50px">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="50px">3</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="50px">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>