一、表格
如生活中的Excel表格，用途就是同来表示一些格式化的数据，如课程表、工资条、成绩单。
在网页中也可以创建出不同的表格，在HTML中使用table标签来创建一个表格。table是个块元素。
在表格中使用tr（table-row 行）来表示表格中的一行，在tr中使用td（table data cell ，表格数据元素）来创建单元格，几个td就是几个单元格。
td表示列名（table Header，头部信息，如“姓名”、“年龄”），也是位于一行当中，即tr之间，th就是一个特殊的td。默认居中加粗。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <style type="text/css"> table{/*为表格设置样式*/ width:300px; margin: 0 auto; border: 1px solid black; /*只是单元格外边有框*/ border-spacing: 0;/*table和td边框之间默认有距离，看起来好像双线，这个属性可以设置去掉*/ border-collapse: collapse;/*可以用来设置表格的边框合并 如果设置了边框合并，border-spacing自动失效，不管你设置的数值有多大。 * */ /*background-color: #BBFFAA;/*设置table的背景颜色,所有的td和tr都变色*/ } td{/*这样看起来好像双线边框*/ border: 1px solid black; } th{ border: 1px solid black; } tr:nth-child(even){/*使用伪类隔行变色，这里是让偶数行(表头也算在内)变色*/ background-color: #BBFFAA; } tr:hover{/*鼠标放在哪行哪行变成黄色*/ background-color: yellow; } </style> </head> <body> <!--<table border="" cellspacing="" cellpadding=""> 这里跟css差不多--> <table> <tr> <th>姓名</th> <!--表头--> <th>年龄</th> <th>性别</th> </tr> <tr> <td>A1</td> <!--元素--> <td>B1</td> <!--rowspan 纵向合并单元格也就是行的合并--> <td rowspan="2">C1</td> </tr> <tr> <td>A2</td> <td>B2</td> </tr> <tr> <td>A3</td> <!--合并B3和C3意味着第3行只有2个单元格 想合并需要在B3上加个属性colspan 横向合并单元格也就是列合并,值设置为要合并单元格的个数。 --> <td colspan="2">B3</td> <!-- <td>C3</td> --> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> </tr> <tr> <td>A5</td> <td>B5</td> <td>C5</td> </tr> <tr> <td>A6</td> <td>B6</td> <td>C6</td> </tr> </table> </body> </html>
【扩展】长表格（如银行流水）
有些时候表格很长，这时将表格分为3部分：表头（thead）、主体（tbody）、底部（tfoot）3个标签。
这3个标签的作用就是区别表格的部分，都是table的子标签。
区分开3部分之后打印时很方便，可以在每一页都加上表头和底部。thead的内容永远会在最上边，tfoot永远在最下边，tbody永远都在中间。
如果表格没有写tbody，浏览器会自动添加tbody，并且把所有的tr都放在tbody中。所以tr并不是table的子元素，通过table>tr子元素选中器无法选中tr.
以前可以用表格来进行页面布局，现在很少用了，它已经被css所取代了。因为它维护很难。
表格是可以相互嵌套的。
使用table可以将父元素和子元素的外边距隔开，阻止他们外边距的重叠。
display：table可以将一个元素设置为表格显示。还可以解决高度塌陷的问题。table也是块元素。
使用.claerfix:after{
content：""；
display：table；
clear：both；
}既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠。在加个 zoom:1 兼容IE6
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>长表格</title> </head> <body> <table> <thead> <tr> <th>日期</th> <th>收入</th> <th>支出</th> <th>合计</th> </tr> </thead> <tbody> <tr> <td>181024</td> <td>+500</td> <td>-300</td> <td>+200</td> </tr> <tr> <td>181025</td> <td>+700</td> <td>-600</td> <td>+100</td> </tr> <tr> <td>181026</td> <td>+800</td> <td>-900</td> <td>-100</td> </tr> <tr> <td>181027</td> <td>+600</td> <td>-700</td> <td>-100</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合计</td> <td>+100</td> </tr> </tfoot> </table> </body> </html>
二、表单
网页中的表单就是用来向服务器提交信息的，最常用的表单就是百度的搜索框，输入关键字后将信息提交给百度服务器，然后服务器返回相应的信息。
还有如注册页、登录、发帖等都需要填写表单。使用form标签。必须指定一个action属性，该属性指向一个服务器的地址。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="26-2 模拟服务器.html" > 用户： <input type="text" name="username" /> <br/> <!--文本框，内联元素--> <!--如果希望表单项的信息提交给服务器需要加个name属性 name表示提交内容的名字 如username 用户填写的信息会附在url后边的以查询字符串的形式发给服务器。如url地址?明值对 多个值的提交以&隔开。 文本框中也可以指定默认值，不是提示文字。 还可以使用label专门选中表单中的提示文字。这样可以用提示文字设置样式 该标签还可以指定一个for属性，该属性的值需要对应于一个表单项的id值。当点击邮件是光标直接跳到选择框 --> <label for="mail">邮件:</label> <input id="mail" type="text" name="email" /> <br/> 密码： <input type="password" name="pwd" /> <!--密码框--> <input type="submit" value="注册"/> <br/><!--提交按钮可以把表单内信息提交给服务器--> <!--单选radio(收音机) 和多选按钮 checkbox 单选按钮通过name来分组，name相同按钮的是一组,只能选择其一。 像这样需要用户选择但是不需要用户填写的表单，必须指定一个value属性，这样被选中的value属性值 会最终提交给服务器 checked="checked" 默认选中，单选和多选都可以设置默认值。 --> <input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="0" checked="checked"/>女 <br /> <input type="checkbox" name="address" value="bj"/>北京 <input type="checkbox" name="address" value="sh"/>上海 <input type="checkbox" name="address" value="nj"/>南京 <br /> <!--下拉列表 select name:需要指定给select value：需要指定给option 默认选中 selected="selected" multiple="multiple" 直接展开，不用下拉。下拉列表变成一个多选的下拉列表。 optgroup可以对选项进行分组 label来指定分组的名字。 --> 省份 <select name="sf"> <optgroup label="华中地区"><!--这个华中地区是不能选的，就是个名字--> <option value="hb">湖北省</option> <option value="sx">安徽省</option> <option value="hn">河南省</option> </optgroup > <optgroup label="华东地区"> <option value="ah">浙江省</option> <option value="ah">江苏省</option> </optgroup> </select> <br /> <!--文本域 textarea 创建一个多行的文本框--> 自我介绍 <textarea name="intro"></textarea> <!--重置按钮 点击重置后表单中的内容会变成默认值 --> <input type="reset" value="重置" /> <br /> <!--一个单纯按钮，唯一的作用就是被人点,可以结合js一起用--> <input type="button" value="点击一下"/> <br /> <!--使用button也可以创建按钮 这种方式更加灵活，可以放个图片交互效果更好--> <button type="button">提交</button> <!--fillset 作用是为表单项进行分组，将表单项中同一组放在一个fillset中 使用legend这个子标签来指定组的名字 --> <!--框架集可以引入多个页面，而内联框架只能引入一个，推荐使用框架集 使用frameset来创建一个框架集。但它与不能与body出现在同一页面中。 使用frame子标签来指定需要引入的页面。 <frame src="01.html" /> 需要在frameset中指定 rows属性 ，让引入的一行一行的排列 cols一列一列的排列。这两个属性必须选择其一，需要在属性中指定大小如百分比。 可以相互嵌套。 --> </form> </body> </html>