表格元素及相关样式
1、<table>标签:声明一个表格
2、<tr>标签:定义表格中的一行
3、<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
表格相关样式属性
- border-collapse 设置表格的边线合并,如:border-collapse:collapse;
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,table,tr,th,td{ padding: 0; margin: 0; } table,th,td{ border: 1px solid orange; /*表格的外面加上边框*/ border-collapse: collapse; /*合并表格中的边框*/ } th{ width: 60px; } td{ text-align: center; } </style> </head> <body> <table> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>1</td> <td>小明</td> <td>6</td> <td>男</td> </tr> <tr> <td>2</td> <td>小花</td> <td>8</td> <td>女</td> </tr> <tr> <td>3</td> <td>小志</td> <td>3</td> <td>男</td> </tr> </table> </body> </html>