摘要:表格table主要用来罗列数据。table有两个子元素:行<tr>,行内又包含列<td>;2行2列的表格: <table> <tr> <td></td> &nb
表格table主要用来罗列数据。
table有两个子元素:行<tr>,行内又包含列<td>;
2行2列的表格:
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
1-- 默认表格是没有边框线的。
2--通常需要给表格<table>添加边框(整个表格的外边框)
给宽高100px的2行2列表格加上外边框,css代码:
table{ width: 100px; height: 100px; border: 2px solid red; }
3--同时其内部单元格<td>也可以加上边框线,宽度可以自适应。
td { border: 2px solid red; }
4--我们一般只需要一条边框线,可以通过给table设置样式
border-collapse:collapse;
来合并外边框和单元格的边框。
5--合并单元格:给需要合并的第一个单元格td标签内设置属性;合并行:rowspan=需要合并的行数,合并列:colspan=需要合并的列数。需要注意:应该删除后面表格中被合并的那个/些单元格
6--表头用<th>标签设置,注意表头默认字体格式为加粗,居中,无边框线
实例练习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table { border-collapse: collapse; width: 300px; height: 100px; border: 2px solid red; } td, th { border: 2px solid red; text-align: center; background-color: lightgoldenrodyellow; } th { color: white; height: 30px; background-color: green; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>年级</th> </tr> <tr> <td>小米</td> <td>女</td> <td>16</td> <td rowspan="2">初二</td> </tr> <tr> <td>小明</td> <td>男</td> <td>15</td> </tr> </table> </body> </html>
批改老师:查无此人批改时间:2018-11-25 11:47:21
老师总结:写的很不错,步骤很清晰。table里还有其他的功能也可以试试,少年加油