day02
HTML表格
<table> 表格
<tr> 行
<td> 单元格
属性border 边框大小
<th> 表格头（内容居中，加粗显示）
<caption> 表格标题，居中显示
带结构的表格
<thead> 表格的头（放标题之类内容）
<tbody> 表格的主体（放数据主体）
<tfoot> 表格的脚（放表格的脚注）
表格属性
<table>标签属性
width
align 水平方向上
border
Bgcolor
Cellpadding 单元格与其内容的距离
cellspacing 单元格之间的距离
frame 外边框显示
rules 内边框显示
表格属性
<tr>标签属性
align 行内容水平对齐
valign 行内容垂直对齐
Bgcolor
<thead> <tbody> <tfoot>标签属性
align
valign
跨列属性colspan
跨行属性rowspan
表格嵌套
嵌入表格说明：
1.完整表格结构
2.放到<td>标签中
表格布局案例(table_7.html)：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>表单select</title> 6 </head> 7 <body> 8 <h1 align="center">注册信息</h1> 9 <hr color="#336699"> 10 <form action="action.php" method="post" target="_blank"> 11 <table width="600px" bgcolor="#f2f2f2" align="center"> 12 <tr> 13 <td align="right">姓名：</td> 14 <td align="left"> 15 <input type="text" name="username" size="25" maxlength="6" placeholder="请输入您的姓名"> 16 </td> 17 </tr> 18 <tr> 19 <td align="right">邮箱：</td> 20 <td align="left"> 21 <input type="text" name="email" size="25" value="@163.com"> 22 </td> 23 </tr> 24 <tr> 25 <td align="right">密码：</td> 26 <td align="left"> 27 <input type="password" name="paw" size="25" maxlength="6" placeholder="请输入您的密码"> 28 </td> 29 </tr> 30 <tr> 31 <td align="right">确认密码：</td> 32 <td align="left"> 33 <input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再次输入您的密码"> 34 </td> 35 </tr> 36 <tr> 37 <td align="right">选择文件：</td> 38 <td align="left"> 39 <input type="file" name="file"> 40 </td> 41 </tr> 42 <tr> 43 <td align="right">性别：</td> 44 <td align="left"> 45 男<input type="radio" name="sex" value="man"checked> 46 女<input type="radio" name="sex" value="man"> 47 </td> 48 </tr> 49 <tr> 50 <td align="right">爱好：</td> 51 <td align="left"> 52 读书<input type="checkbox" name="dx1" value="read" checked> 53 跳舞<input type="checkbox" name="dx1" value="dance"> 54 唱歌<input type="checkbox" name="dx1" value="sing"> 55 </td> 56 </tr> 57 <tr> 58 <td align="right">爱好的运动：</td> 59 <td align="left"> 60 跑步<input type="checkbox" name="dx1" value="run" checked> 61 篮球<input type="checkbox" name="dx1" value="basketball"> 62 跳绳<input type="checkbox" name="dx1" value="skip"> 63 </td> 64 </tr> 65 <tr> 66 <td align="right">城市：</td> 67 <td align="left"> 68 <select name="city"> 69 <option value="xz">--请选择--</option> 70 <option value="bj">北京</option> 71 <option value="tj">天津</option> 72 <option value="sh">上海</option> 73 <option value="gz">广州</option> 74 <option value="sz">深圳</option> 75 <option value="cd">成都</option> 76 <option value="hz">杭州</option> 77 <option value="xa">西安</option> 78 </select> 79 <select name="city" multiple size="5"> 80 <option value="xz">--请选择--</option> 81 <option value="bj">北京</option> 82 <option value="tj">天津</option> 83 <option value="sh">上海</option> 84 <option value="gz">广州</option> 85 <option value="sz">深圳</option> 86 <option value="cd">成都</option> 87 <option value="hz">杭州</option> 88 <option value="xa">西安</option> 89 </select> 90 <select name="city"> 91 <option value="xz">--请选择--</option> 92 <optgroup label="华东"> 93 <option value="bj">北京</option> 94 <option value="tj">天津</option> 95 <option value="sh">上海</option> 96 <option value="gz">广州</option> 97 </optgroup> 98 <optgroup label="华北"> 99 <option value="sz">深圳</option> 100 <option value="cd">成都</option> 101 <option value="hz">杭州</option> 102 <option value="xa">西安</option> 103 </optgroup> 104 </select> 105 </td> 106 </tr> 107 108 <tr> 109 <td align="right"> 110 <input type="hidden" name="hidden" value="这是一个用户注册信息"> 111 </td> 112 <td align="left"></td> 113 </tr> 114 <tr> 115 <td align="right">简介：</td> 116 <td align="left"> 117 <textarea name="jj" placeholder="请输入" rows="6" cols="50"></textarea> 118 </td> 119 </tr> 120 <tr> 121 <td align="right" colspan="2"> 122 <input type="button" name="button" value="click me!"> 123 <input type="submit" name="submit" value="submit"> 124 <input type="reset" name="reset" value="reset"> 125 <input type="image" name="image" src="image/image-button.png"> 126 </td> 127 </tr> 128 </table> 129 </form> 130 </body> 131 </html>
图示：
注意：
1.尽量少的使用表格嵌套
2.尽量少的使用表格跨行跨列
会增加代码的整体维护成本