表的布局
表格布局的网页
与表相关的标签
创建表格
<html>
<head>
<title>使用表格</title>
</head>
<body>
<table border ="2" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>分数</td>
</tr>
<tr>
<td>Robert</td>
<td>M</td>
<td>80</td>
</tr>
</table>
</body>
</html>
表格的标题
<html>
<body>
<table border="2">
<caption align="top”>学员档案信息</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>Robert</td>
<td>M</td>
<td>80</td>
</tr>
.......
</table>
</body>
</html>
表格的对齐方式
<html>
<body>
<table border="2" align="center">
<caption align="top">学员档案信息</caption>
<tr>
<th>姓名</th>
<th align="left">性别</th>
<th align="right">分数</th>
</tr>
<tr>
<td>Robert</td>
<td align="center">M</td>
<td align="right">80</td>
</tr>
</table>
</dody>
</html>
设定"垂直对齐位置”
<html >
<head>……</head>
<body>
<table width="300” height="300”>
<tr align="center" valign="middle">
<td align="center" valign="top"> 朋友</td>
<td align="center" valign="middle"> 你好</td>
<td align="left" valign="bottom"> 晚安</td>
</tr>
</table>
</body>
</html>
插入行示例
<html>
<body>
<table border ="2">
<tr>
<td>数据单元格1</td>
<td>数据单元格2</td>
<td>数据单元格3</td> </tr>
<tr>
<td>数据单元格4</td>
<td>数据单元格5</td>
<td>数据单元格6</td>
</tr>
<tr>
<td>新行1</td>
<td>新行2</td>
<td>新行3</td>
</tr>
</table>
</body>
</html>
合并单元格
在 <th> 或 <td> 标记中使用 colspan 属性，可以设置单元格所跨的列数例如: colspan="3"表示跨3列
在 <th> 或 <td> 标记中使用 rowspan 属性，可以设置单元格所跨的行数例如: rowspan="3"表示跨3行
<body>
<table border="2” align="center”>
<caption>创建表格 </caption>
<th colspan ="3”>第一学期</th>
<th colspan ="2”>第二学期</th>
<tr>
<td>数学</td>
<td>科学</td>
<td>英语</td>
<td>数学</td>
<td>科学</td>
<td>英语</td>
<tr>
<td>98</td>
<td>88</td>
合并单元格(跨行)
<body>
<table border ="1” align ="center”>
<caption><b>创建表格<b></caption>
<tr>
<tr></tr>
<th></th>
<th>螺母</th>
<th>螺栓</th>
<th>锤子</th>
<tr>
<td rowspan ="3">第一季度</td>
<td>一月</td>
<td>2500</td>
<td>1000</td>
<td>1240</td>
<tr>
<td>二月</td>
.....
单元间隔和单元填充
div层
<html>
<head>
<title>将元素分组</title>
</head>
<body bgcolor="lavender">
<div id="Layer1" style="position:absolute; left:25px; top:27px; width:360px; height:315px; z-index:1; background-color:aqua;">
<div>
<font color="red">
<h1>第一层</h1>
<p>这是第一部分内的一个段落元素</p>
<p>第一层的内容。</p></font>
</div>
<p>该部分之外</p>
<div>
<font color="blue">
<h2>第二部分</h2>
<p>这是第二部分内的一个段</p>
<p>第一层的内容。</p></font>
</div>
</div>
</body>
</html>
创建层
<div top="25" id="layer1">
<p>
<font color ="limegreen” size ="4”>
<b>层 1</b>
</font>
</p>
</div>
实例
<div class="div-relative" style="position:relative; color:#000; border:1px solid #000; width:500px; height:400px ">
<div class="div-a" style=" position:absolute; left:30px; top:30px; background:#F00; width:200px; height:200px">我背景为红色</div>
<div class="div-b" style=" position:absolute; left:50px; top:60px; background:#FF0; width:200px; height:200px">我背景为黄色</div>
<div class="div-c" style=" position:absolute; line-height: 200px;text-align: center;left:70px; top:80px; background:#00F; width:200px; height:200px" >我背景为蓝色</div>
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
