表格标签
<table> //表格标签:
<tr> //行标签
<td> //单元格
http://120.x5.x.x:8080/myhome/mytable.html
表格跨行或者跨列的效果:
跨行:
<tr>
<td align="center" colspan="2">北京</td>
<!--<td align="center">上海</td>-->
</tr>
跨列:
<tr>
<!--<td align="center">广州</td>-->
<td align="center" bgcolor="#00ff66">深圳</td>
</tr>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<center>
<!--th表示标头-->
<th>这是一个表格示例</th>
<!--table表格标签-->
<table border="1" width="600" height="50" cellspacing="0" cellpadding="0" bgcolor="#cc00cc">
<!--tr行标签 表示行-->
<!--td表示一个单元格-->
<tr>
<td align="center" rowspan="2">北京</td>
<td align="center">上海</td>
</tr>
<tr>
<!--<td align="center">广州</td>-->
<td align="center" bgcolor="#00ff66">深圳</td>
</tr>
</table>
</center>
</body>
</html>
跨行 下一个行标签少一个td 少一个单元格
跨列 同一个行标签少一个td 少一个单元格
///////////跨列效果:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<center>
<!--th表示标头-->
<th>这是一个表格示例</th>
<!--table表格标签-->
<table border="1" width="600" height="50" cellspacing="0" cellpadding="0" bgcolor="#cc00cc">
<!--tr行标签 表示行-->
<!--td表示一个单元格-->
<tr>
<td align="center" colspan="2">北京</td>
<!--<td align="center">上海</td>-->
</tr>
<tr>
<td align="center">广州</td>
<td align="center" bgcolor="#00ff66">深圳</td>
</tr>
</table>
</center>
</body>
</html>
使用表格来完成课程表:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<center>
<th>xxx课程表</th>
<table border="1" width="600" height="400" cellspacing="0" cellpadding="0" >
<tr>
<td colspan="2">时间/星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>英语</td>
<td>化学</td>
<td>语文</td>
<td>代数</td>
<td>代数</td>
</tr
<tr>
<td>2</td>
<td>物理</td>
<td>语文</td>
<td>英语</td>
<td>几何</td>
<td>化学</td>
</tr
<tr>
<td>3</td>
<td>地理</td>
<td>英语</td>
<td>代数</td>
<td>体育</td>
<td>物理</td>
</tr
<tr>
<td>4</td>
<td>体育</td>
<td>生物</td>
<td>几何</td>
<td>语文</td>
<td>语文</td>
</tr
<tr>
<td rowspan="3">下午</td>
<td>5</td>
<td>语文</td>
<td>历史</td>
<td> </td>
<td>英语</td>
<td>地理</td>
</tr
<tr>
<td>6</td>
<td>自习</td>
<td>自习</td>
<td></td>
<td>生物</td>
<td>历史</td>
</tr
<tr>
<td>7</td>
<td>自习</td>
<td>自习</td>
<td></td>
<td>生物</td>
<td>班会</td>
</tr
</table>
</center>
</body>
</html>
表格布局: