您的位置：首页 > 其它

表格标签和表格布局

2016-05-10 14:49 183 查看 
表格标签

<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>

表格布局:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航