HTML 表格及练习
表格
概述
-
表格是一种二维结构，横行纵列。
-
由单元格组成。
-
表格是一种非常“强” 的结构：
-
每一行有相同的列数（单元格），每一列有相同的行数（单元格）
-
同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高
-
基本结构
<table><tr><td></td></tr> </table>
<table>
-
定义表格
-
<table>标签属性属性 举例 效果 border border=“0”
border=“1”无边框
有边框cellspacing cellspacing=“20” 设置边框与边框的距离 cellpadding cellpadding=“10” 设置边框与内容之间的距离 -
table通用属性<table>,<tr>,<td>都识别的属性属性 值 举例 效果 align left/center/right align=“center” 居中 width 百分比/数字 width="80%"或 width=“800” 设置宽度 height 百分比/数字 height="20%"或 height=“100” 设置高度
<tr>
-
定义行
-
<tr>标签属性属性 值 举例 效果 valign top/middle/bottom valign=“top” 在行顶
<td>
-
定义单元格
-
合并单元格
colspan用于跨列合并 (横向)<td colspan = "2"></td>删除第四列，第三列的
colspan的值设置为2rowspan用于跨行合并 (纵向)<td rowspan = "3"></td>
练习
基本表格
<html><head><meta charset="utf-8"></head><body><table border="1"><tr><td>(1,1)</td><td>(1,2)</td><td>(1,3)</td></tr><tr><td>(2,1)</td><td>(2,2)</td><td>(2,3)</td></tr><tr><td>(3,1)</td><td>(3,2)</td><td>(3,3)</td></tr></table></body>
</html>
跨行表格
<html><head><meta charset="utf-8"></head><body><table border="1" width="300"><tr align="center"><td rowspan="2">语文</td><td>韩梅梅</td><td>98</td></tr><tr align="center"><td>李磊</td><td>88</td></tr><tr align="center"><td rowspan="2">数学</td><td>韩梅梅</td><td>95</td></tr><tr align="center"><td>李磊</td><td>12</td></tr></table></body>
</html>
跨列表格
<html><head><meta charset="utf-8"></head><body><table border="1" width="300"><tr><td colspan="3" align="center">学生成绩</td></tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>99</td></tr></table></body>
</html>
跨行跨列表格
<html><head><meta charset="utf-8"></head><body><table border="1" width="300"><tr><td colspan="3" align="center">学生成绩</td></tr><tr align="center"><td rowspan="2">语文</td><td>韩梅梅</td><td>98</td></tr><tr align="center"><td>李磊</td><td>88</td></tr><tr align="center"><td rowspan="2">数学</td><td>韩梅梅</td><td>95</td></tr><tr align="center"><td>李磊</td><td>12</td></tr></table></body>
</html>
