HTML表格
表格由<table>标签来定义，表格的行由<tr>标签来定义，表格的列由<td>标签来定义
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>
border=1是设置边框的粗细，不需要边框，可以去掉
使用<th>标签定义表头，大部分浏览器会把表头加粗居中显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1"> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>
跨格表格使用colspan属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1"> <tr> <th colspan="2">单元格跨两格</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>
跨列表格使用rowspan属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1"> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td rowspan="2">单元格跨两列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第二列</td> </tr> </table> </body> </html>
