表格
1、基本写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table{ border-collapse: collapse; /*取消边框之间的间隙*/ } th,td{ padding: 0px; } </style> </head> <body> <table border="1"> <!-- 设置表格边框 --> <thead> <!-- 表头 --> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <!-- body --> <tr> <!-- 行 --> <td>1</td> <!-- 列 --> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </tbody> </table> </body> </html>
2、合并单元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table{ border-collapse: collapse; /*取消边框之间的间隙*/ } th,td{ padding: 0px; } </style> </head> <body> <table border="1"> <!-- 设置表格边框 --> <thead> <!-- 表头 --> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <!-- body --> <tr> <!-- 行 --> <td colspan="2">1</td> <!-- 合并列单元格 --> <!-- <td>2</td> --> <!-- 需要删除一列 --> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <!-- 行 --> <td>1</td> <td>3</td> <td>4</td> <td rowspan="2">5</td> <!-- 合并行单元格 --> <td>1</td> </tr> <tr> <td>1</td> <td>3</td> <td>4</td> <!-- <td>5</td> --> <!-- 合并行单元格删除 --> <td>1</td> </tr> </tbody> </table> </body> </html>
