表格
概述
-
表格是一种二维结构，横行纵列。
-
由单元格组成。
-
表格是一种非常“强” 的结构：
-
每一行有相同的列数（单元格），每一列有相同的行数（单元格）
-
同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高
-
基本结构
<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>
