HTML表格与表单实战
（1）表格中嵌套有序表无序表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<!-- 第一行嵌套无序表-->
<tr>
<td>
<ul>
<li>abs</li>
<li>asd</li>
</ul>
</td>
</tr>
<!--第二行中第一列：有序表中嵌套无序表。第二行第二列：单个内容--->
<tr>
<td>
<ol>
<li>s
<ul>
<li>ad</li>
</ul>
</li>
</ol>
</td>
<td>sd</td>
</tr>
</table>
</body>
</html>
（2）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> hello</title>
</head>
<body>
<a name="yy">goto</a>
<h1 > hello world!</h1></br>
<h1 > hello world!</h1></br>
<h1 > <font color=pink size=5>hello world!</font></h1></br>
<h1 style="background-color:yellow" font-size=16> hello world!</h1></br>
<h1 > hello world</h1></br><span style="color:yellow">in-line <font color=red> dfvdsvfdsvfdsvf </font> </span><!--span是承载文本内容的容器，可以对其属性改变。front可以直接对字体颜色改变-->
<!--添加背景图片-->
<table weidth="500" height="200" border="1" bordercolor="black"cellpadding="15" background="C:\Documents and Settings\Administrator\桌面\5.bmp">
（3）valign与align用法
<table border="1" width="500px" height="400px">
<tr >
<td valign=top> 123</td>
<td > <center>456</center></td>
</tr>
<tr >
<td valign="top" align="right"> 789</td>
<td valian="baseline" align="right"> 111213</td>
</tr>
</table>
【转】https://www.douban.com/note/325833958/
align和valign属性均是规定表格相对于周围元素的对齐方式，区别就在于：
1、align属性趋向于左右对齐，其值包含：left、right、center在 HTML 4.01 中，不赞成使用 body 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 body元素的 align 属性。请使用CSS中的float属性代替。
2、valign属性趋向于垂直对齐，其值包含：top、bottom、middle、baseline所有浏览器都支持 valign 属性。基线（baseline）是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同的基线。该值的效果常常与bottom值相同。不过，如果文本的字号各不相同，那么baseline的效果会更好。以下为图示：作为一个随手记，希望也能够帮助到大家，兴许其中就有你以前所没有注意到的地方。
（4）习题
<table style="background:grey" width="300px" height="300px"border=1
celpadding=1 cellpacing=2>
<tr>
<td colspan=3 > </td>
</tr>
<tr>
<td width="10%" > </td>
<td width="10%" > </td>
<td width="10%" > </td>
<td > </td>
<tr>
<td colspan=3 > </td>
</tr>
</table>
（5）习题
<table>
<table border="1" bordercolor="black" width="200px" height"800px" cellspacing="0" cellpadding="0">
<tr>
<td colspan=2>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td colspan=2 rowspan=2>5</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
<div style="width:300px;height:300px;">
<div style="width:200px;height:100px;float:left;background-color:red;">1</div>
<div style="width:100px;height:100px;float:right;background-color:green;">2</div>
<div style="width:100px;height:100px;float:left;background-color:yellow;">3</div>
<div style="width:200px;height:200px;float:right;background-color:pink;"><center>5</center></div>
<div style="width:100px;height:100px;float:left;background-color:blue;">4</div>
</div>
<p name="yy">fdsfdsfadsfdsfdsafds</p>
（6）表单
form表单
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="yyy.php" methord="post">
<!--form表单 action属性提交你所提交的路径 methord提交方式分为post get 等-->
UserName:<input type="text"><br/>
PassWord:<input type="password"><br/>
<!--name不能不一致，否则可以多选2.password是暗文显示3.-->
<input type="radio" name="sex">男
<input type="radio" name="sex">女</br>
爱好：<input type="checkbox">运动
<input type="checkbox">唱歌
<input type="checkbox">游泳</br>
<!--3行20列-->
<textarea rows="3" cols="20">
</textarea>
<textarea rows="20" cols="3">
</textarea>
<input type="button" value="I M NUTTON">
<button>wowowo</button>
<!--option为提交的内容，有值给后台提交-->
<select>
<option value="ios">ios</option>
<option>java</option>
<option>c++</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
</table>
扫一扫
7646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
