表格标签
<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>
表格布局:
表格标签和表格布局
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:表单提交
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
HTML标签之表格标签和表格案例
html中关于表格标签的使用和介绍
html5 html 合并单元格 ci -
Html 表格标签和表单标签
表单是用来采集用户的输入数据,然后将数据提交给服务器。
html 表单 数据 服务器 -
表格标签之表格属性
代码】表格标签之表格属性。
前端 html 属性值 宽高