<table boder=“100”> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
1.1表格的宽度和高度默认是按照内容的尺寸来调整的。也可以通过table标签设置width/height属性的方式来手动制定表格的宽度和高度
<able boder="100" width="500px" height="300px" align="center">
<tr valign="center">
<td width="150px" height="50px">1.1</td>
</tr>
<tr>
</tr>
</table>
水平对齐和垂直对齐属性:水平对齐可以给Table标签和Tr标签和Td标签使用;垂直标签只能给tr和td标签使用 外边距和内边距的属性:只能给Table标签使用.
<able boder="100" width="500px" height="300px" align="center" cellspacing="12px" cellpadding="20px">
<tr valign="center">
<td width="150px" height="50px">1.1</td>
</tr>
</table>
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table bgcolor="black" cellspacing="2px" width="1000px" align="center">
<caption> <h1>新闻大事件</h1> </caption> <tr bgcolor="#b8b8b8"> <th>中国崛起</th> <th>中国崛起</th> <th>中国崛起</th> <th>中国崛起</th> <th>中国崛起</th> </tr> </table>
- 表格的结构
- 标题
- 表头信息
- 主题信息
- 页尾信息
<table> <caption>表格的标题</caption> <thead> <tr> <th>每一列标题</th> </tr> </thead> <tbody> <tr> <th>数据</th> </tr> </tbody> <tfooty> <tr> <th>表尾数据</th> </tr> </tfoot> </table>
- 单元格合并
- 水平方向的单元格合并
<table bgcolor="black" width="2px" height= "1000px" align="center"> <tr bgcolor="while"> <td colspan="2"></td> // 代表水平方向上的融合 <td></td> <td></td> </tr> <tr bgcolor="while"> <td></td> <td></td> <td></td> </tr> </table>
- 垂直方向的单元格合并
<table bgcolor="black" width="2px" height= "1000px" align="center"> <tr bgcolor="while"> <td rowspan="2"></td> // 代表垂直方向上的融合 <td></td> <td></td> </tr> <tr bgcolor="while"> <td></td> <td></td> <td></td> </tr> </table>
- 多单元格合并
<table bgcolor="black" cellpadding="10px" cellspacing="1px" width="300px" height="300px" align="center"> <tr bgcolor="white"> <td>345</td> <td >345</td> <td>345</td> </tr> <tr bgcolor="#adff2f"> <td >123</td> <td colspan="2" rowspan="2">123</td> </tr> <tr bgcolor="#adff2f"> <td>153</td> </tr> <tr bgcolor="#adff2f"> <td>123</td> <td>123</td> <td>123</td> </tr> </table>
![多单元格合并](http://upload-images.jianshu.io/upload_images/642887-4a2a613b8cbbfeac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 表单标签
- 作用:
收集用户信息
- 元素:
在HTML中标签就是元素,表单元素是比较特殊的标签。
- 格式:
<form><表单元素></form> 表单元素 <input type=“text”>标签
- 常用方式:
<form> 账号:<input type="text"> 密码:<input type="password"> // name="gender" 起名字就是让其只能选择一个,checked表示默认选中,type="radio"表示单选 性别:<input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender">女 // 多选 爱好<input type="checkbox" checked="checked">中国 <input type="checkbox">足球 <input type="checkbox">牛逼 <input type="button" value="点击跳转"> <input type="image" src="image/pic.png"> <input type="reset" value="清空"> <input type="number"> <input type="data"> <input type="color"> <input type="email"> </form> //提交方式 <form action="http://www.jianshu.com"> 账号:<input type="text"> 密码:<input type="password"> // 将表单中填好的数据,提交到服务器 <input type="submit" value="提交"> // 隐藏域,其实就是隐藏数据提交 <input type="hidden" name="cc" value="kuku"> </form>
- Lable标签
- 格式
<form action=""> <lable for="account">账号:</lable><input type="text" id="account"> <lable>账号:<input type="text"> </lable> </form>
- select标签
- 作用:用于定义下拉列表
- 格式:
<select> <option>北京</option> <option>北京</option> <option>北京</option> <option>北京</option> </select>
- datalist标签
- 作用:下拉选框,可以自己输入内容,同时还会帮助你筛选输入内容是否与下拉框有相同的。
- 格式:
请输入你的车型:<input type="text" list="cars"> <datalist id="cars"> <option >车型</option> <option>彻心</option> <option >输电</option> </datalist>
![image.png](http://upload-images.jianshu.io/upload_images/642887-d5696cf8f324c6f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 其他用法:
请输入你的车型:<input type="text" list="cars"> <datalist id="cars"> <option value="123">车型</option> <option value="345">彻心</option> <option value="678">输电</option> </datalist>
![image.png](http://upload-images.jianshu.io/upload_images/642887-8ff0c71c0f2a374f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- select标签
- 作用:生成一个下拉选项,但是不可以书写内容
- 格式:
<select> <option>朋友圈</option> <option>支付宝</option> <option>全资气</option> </select>
![image.png](http://upload-images.jianshu.io/upload_images/642887-884f9706464a3244.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 其他用法
<select> <optgroup label="腾讯"> <option>深圳总部</option> <option>北京总部</option> <option>上海总部</option> </optgroup> <optgroup label="百度"> <option>北京百度</option> <option>广州百度</option> <option>深圳百度</option> </optgroup> </select>
![image.png](http://upload-images.jianshu.io/upload_images/642887-81c5ee8d617cc9d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- textarea标签
- 作用:定义多行的输入框,默认就有拉伸的功能
- 格式:
<head> <meta charset="UTF-8"> <title>datalist</title> <style type="text/css"> textarea{ // 不让它拉伸 resize: none; } </style> <textarea cols="3" rows="3"> </textarea>
- 注意点:虽然指定了行数烈数,但是还是可以无线输入
` ` 这个用来空格
<form action="http://www.taobao.com"> <fieldset> <legend>雷潮博客</legend> 姓名:<input value="name" type="text"> 密码:<input value="密码" type="password"> <p> 性别:<input type="radio" name="sex" >男 <input type="radio" name="sex">女 <input type="radio" name="sex" checked>保密 </p> <p> 个人简介:<textarea></textarea> </p> <p> <input type="submit" value="提交">   <input type="reset" value="重置"> </p> </fieldset> </form>