1、使用表单标签
网站使用 HTML 表单可与用户进行交互，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单使用表单标签 <form> 来定义：
<form method="传送方式" action="表单提交地址" name="表单名称"></form>
注意：<from> 是一对闭合标签，成对出现。method 属性规定数据传送的方式（get/post）。action 属性规定当提交表单时用户输入的数据被传送向何处，比如一个 PHP 页面(demo.php)。name 属性可设置表单的名称。所有的表单控件都必须放在<from></from>标签之间，否则用户输入的信息提交不到服务器上。
accept-charset 属性规定服务器可处理的表单数据字符集。默认值是保留字符串 "UNKNOWN"，表示编码为包含 <form> 元素的文档的编码。
enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。注意：只有 method="post" 时才使用 enctype 属性。
下面是2个新属性：
autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。注意：autocomplete 属性 "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。默认值为 on 规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。off 则规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。
novalidate 属性规定当提交表单时不对表单数据进行验证。
From 中的 Get 和 Post 方法：
(1)、Get 方式将表单中数据的按照 var=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；而 Post 方式是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向的 URL。如下 Get 方式传送：
http://www.abc.com/demo.php?name=小白&password=12345678
(2)、Get 方式是不安全的，因为在传输过程，数据被存放在请求的 URL 地址中，这样容易造成信息泄漏。
(3)、Get 方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，因此建议尽量使用 Post 方法传送数据，比如用户注册，使用 Get 方法请求数据，比如浏览贴子。
2、文本框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框。输入域通过 <input> 标签完成，该标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。如下：
1 <form method="post" action="demo.php"> 2 <label for="name">用户名:</label> 3 <input type="text" name="username" id="name" value="小白"><br/> 4 <label for="pass">密 码:</label> 5 <input type="password" name="password" id="pass" placeholder="请输入密码"> 6 </form>
<input> 标签用于定义输入域，而 type 属性规定了要显示的输入域的内容，type="text" 为默认值，定义一个单行的文本字段输入，默认显示宽度为 20 个字符。 name 属性为文本框命名，以备后台程序调用。type="password" 定义密码字段，密码字段字符不会明文显示，而是以星号或圆点替代。
value 属性可为文本框设置默认值，一般起到提示的作用，value 属性对于不同 input 类型，用法也不同：
(1)、对于 "text"、"password"、"hidden" 类型，定义输入字段的初始（默认）值。
(2)、对于 "button"、"submit"、"reset"、类型，定义按钮上的文本。
(3)、对于 "checkbox"、"radio"、"image" 类型，则定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。
注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的，不适用于 <input type="file">。
而 placeholder 属性则可规定输入字段预期值的简短的提示信息，比如一个样本值或者预期格式的短描述，该提示会在用户输入值之前显示在输入字段中，该值显示为虚体，颜色浅，当用户输入时自动清除，而用于 <input type="text" value="小白"> 的 value 属性的默认值显示为实体，而且颜色深，在用户输入时需要自行清除。placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
<label> 标签则为 input 元素定义标记，一般为输入标题。<label> 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在该标签内点击文本，就会触发此控件。就是说，当用户单击选中该 <label> 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 <label> 标签相关连的表单控件上）。for 属性规定 label 与哪个表单元素绑定，该属性的值应当与绑定元素的 id 属性值相同。如下：
1 <form method="post" action="demo.php"> 2 <label for="male">男</label> 3 <input type="radio" id="male" name="gender"><br/> 4 <label for="female">女</label> 5 <input type="radio" id="female" name="gender"><br/> 6 <label for="email">邮箱</label> 7 <input type="email" id="email" placeholder="请输入邮箱地址"> 8 </form>
3、文本域
文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过 <textarea> 标签完成，如下：
1 <form method="post" action="demo.php"> 2 <label for="txt">发表意见：</label><br/> 3 <textarea cols="50" rows="10" id="txt">在这里输入内容...</textarea> 4 </form>
注意：<textarea> 标签是一对闭合标签，成对出现，在开始标签和结束标签之间可以输入默认值，cols 和 rows 属性则定义文本域的行数和列数，更好的办法是使用 CSS 的 width 和 height 属性来定义文本与的大小，width 代替 cols，height 代替 rows。
4、选择框
选择框可以让用户做出选择，在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML 中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。定义选择框通过 <input> 标签完成，不同的是输入类型。
(1)、单选框
type="radio" 定义了单选框，也叫单选按钮，允许用户在一定数量的选择中选取一个选项。如下：
1 <form method="post" action="demo.php"> 2 <label for="love">喜 欢</label> 3 <input type="radio" id="love" name="like" value="喜欢" checked><br/> 4 <label for="noLove">不喜欢</label> 5 <input type="radio" id="noLove" name="like" value="不喜欢"><br/> 6 <label for="casual">无所谓</label> 7 <input type="radio" id="casual" name="like" value="无所谓"><br/> 8 </form>
(2)、复选框
type="checkbox" 定义了复选框，允许用户可以选择多个选项。如下：
1 <form method="post" action="demo.php"> 2 <label for="tool1">自行车</label> 3 <input type="checkbox" id="tool1" name="bike" value="自行车"><br/> 4 <label for="tool2">汽 车</label> 5 <input type="checkbox" id="tool2" name="car" value="汽车"><br/> 6 <label for="tool3">飞 机</label> 7 <input type="checkbox" id="tool3" name="plane" value="飞机" checked><br/> 8 <label for="tool4">火 箭</label> 9 <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/> 10 <label for="tool5">毛 线</label> 11 <input type="checkbox" id="tool5" name="wool" value="毛线"> 12 </form>
value 属性值是必需的，为提交数据到服务器的值，供后台程序使用。name 属性为输入控件命名，供后台程序使用，checked 属性规定在页面加载时应该被预先选定的 <input> 元素。该属性只适用于 <input type="radio"> 和 <input type="checkbox">。checked 属性用于设置默认选项，即该选项会被默认选中。该属性也可以在页面加载后，通过 JavaScript 代码进行设置。
注意：同一组的单选按钮，name 属性取值一定要一致，比如上面例子为同一个名称“like”，这样同一组的单选按钮才可以起到单选的作用。同一组的复选框，name 属性取值可以一致，这样方便为其定义样式，或者通过 JS 获取元素。
5、下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、也可以多选。下拉列表框通过 <select> 标签 和 <option> 标签完成。
(1)、下拉列表单选框
1 <form method="post" action="demo.php"> 2 <label for="like">喜欢：</label> 3 <select id="like" name="cars"> 4 <option value="奥迪">奥迪</option> 5 <option value="宝马">宝马</option> 6 <option value="奔驰">奔驰</option> 7 <option value="宾利">宾利</option> 8 <option value="路虎">路虎</option> 9 </select> 10 </form>
(2)、下拉列表复选框
1 <form method="post" action="demo.php"> 2 <label for="like">喜欢：</label> 3 <select id="like" name="cars" multiple> 4 <option value="奥迪">奥迪</option> 5 <option value="宝马">宝马</option> 6 <option value="奔驰">奔驰</option> 7 <option value="宾利">宾利</option> 8 <option value="路虎" selected>路虎</option> 9 </select> 10 </form>
<select> 标签定义下拉列表选项，而 <option> 标签定义下拉列表中的选项。
下拉列表单选框和下拉列表复选框，唯一的不同就是复选框使用了 multiple 属性实现了多选功能，下拉列表可以进行多选操作就是在 <select> 标签中设置了 multiple 属性，该属性用于规定可同时选择多个选项，需要注意：下拉列表框根据选项的个数(单选/复选)，会在网页上呈现不同的显示效果。在不同的操作系统，选择多个选项的方法也不同，在 windows 操作系统下，需要按住 Ctrl 键来选择多个选项，而在 Mac 系统下，需要按住 Command 键来选择多个选项。
<option> 标签的 value 属性值为向服务器提交的值，selected 属性则表示该选项被默认选中，即首次在列表中时表现为选中状态。该标签需要与 <select> 标签配合使用，否则这个标签是没有任何意义的。
<select> 元素是一种表单控件，可用于在表单中接受用户输入。还元素有几个重要属性，required 属性规定用户在提交表单前必须选择一个下拉列表中的选项。autofocus 属性规定在页面加载时下拉列表自动获得焦点。size 属性规定下拉列表中可见选项的数目。由于各属性之间的差异，需要告诉用户是否可以多项选择，对用户更友好的方式是使用复选框。
如果有很多的选项组合，就可以使用 <optgroup> 标签能够很简单的将相关选项组合在一起。该标签经常用于把相关的选项组合在一起。如下：
1 <form method="post" action="demo.php"> 2 <label for="like">喜欢：</label> 3 <select> 4 <optgroup label="国产"> 5 <option value="奇瑞">奇瑞</option> 6 <option value="大众">大众</option> 7 <option value="现代">现代</option> 8 <option value="哈弗">哈弗</option> 9 <option value="比亚迪">比亚迪</option> 10 </optgroup> 11 <optgroup label="进口"> 12 <option value="兰博基尼">兰博基尼</option> 13 <option value="雷克萨斯">雷克萨斯</option> 14 <option value="凯迪拉克">凯迪拉克</option> 15 <option value="玛莎拉蒂">玛莎拉蒂</option> 16 <option value="英菲尼迪">英菲尼迪</option> 17 </optgroup> 18 </select> 19 </form>
<optgroup> 标签一个重要属性 label 用于为选项组规定描述。
6、按钮
在表单中有两种按钮可以使用，分别为：提交按钮和重置按钮。还有一种按钮叫做点击按钮。
(1)、点击按钮
type="button" 定义一个可点击的按钮，在用户点击按钮时启动一段 JavaScript。
1 <input type="button" value="按钮" onclick="show()"> 2 <script> 3 function show(){ 4 alert("Hello world!"); 5 } 6 </script>
(2)、提交按钮
当用户需要提交表单信息到服务器时，需要用到提交按钮。type="submit" 用于定义提交按钮。
1 <form method="post" action="demo.php"> 2 <label for="urse">用户名：</label> 3 <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/> 4 <label for="password">密 码：</label> 5 <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/> 6 <input type="submit" value="提交信息"> 7 </form>
button 和 submit 都是定义一个按钮，不同的是 button 只是一个普通的按钮，主要用于绑定事件，如果不给其绑定事件，那么点击按钮不会有任何反应。而 submit 则是提交按钮，主要用于提交表单，传送数据，如果给 submit 绑定事件，那么点击按钮触发事件的同时，也会提交表单。
(3)、重置按钮
当用户需要重置表单信息到初始时的状态时，比如用户输入信息后，发现输入错误，那么可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。
1 <form method="post" action="demo.php"> 2 <label for="urse">用户名：</label> 3 <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/> 4 <label for="password">密 码：</label> 5 <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/> 6 <input type="submit" value="提交信息"> 7 <input type="reset" value="重置信息"> 8 </form>
type="reset" 用于定义一个重置按钮，需要谨慎使用该按钮，当用户点击重置按钮后，所有表单值都会恢复到默认值，这对于用户来说，如果不慎点击了重置按钮将是一件十分令人恼火的事。
在 HTML 中还有一种创建按钮的方法就是使用 <button> 标签。该元素与使用 <input> 元素创建的按钮之间的不同之处就在于：使用 button 元素创建的按钮，在该元素内部可以放入内容，比如文本或图像，也就是该元素可以使用多媒体内容，<button> 与 </button> 标签之间的所有内容都是按钮的内容。该元素也可以定义点击按钮、提交按钮和重置按钮。但是他的缺点就是：不同的浏览器对 <button> 元素的 type 属性使用不同的默认值，因此要始终为 <button> 元素规定 type 属性，不同浏览器可能会提交不同的按钮值，也就是浏览器得到的 value 值不同，存在兼容性问题。所以要使用 <input> 元素在 HTML 表单中创建按钮。
7、input 元素属性和其他输入类型
除了前边提到的一些属性外，input 元素还有一些重要属性，以及 HTML5 新增加的属性。
readonly 属性规定输入字段是只读的。该属性是一个布尔值。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止，比如选中了一个复选框。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
size 属性规定以字符数计的 <input> 元素的可见宽度。size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。如需规定 <input> 元素中允许的最大字符数，需要使用 maxlength 属性。
以下是 HTML5 中的新属性：
autocomplete="on|off" 属性规定输入字段是否应该启用自动完成功能。默认值为 on，规定用户启用自动完成功能，off 则表示禁用。注意：autocomplete 属性适用于下面的 <input> 类型：text、search、url、tel、email、password、date pickers(日期选择器)、range 和 color。
multiple 属性规定允许用户输入到 <input> 元素的多个值。该值是一个布尔值，注意：multiple 属性适用于以下 input 类型：email 和 file。
pattern 属性规定用于验证 <input> 元素的值的正则表达式。可以使用使用全局的 title 属性来描述模式以帮助用户。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
required 属性规定必需在提交表单之前填写输入字段。该属性是一个布尔值，required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
下面是 input 元素的其他输入类型：
(1)、图像作为按钮
type="image" 用于定义图像作为提交按钮，如下：
<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">
上面代码中的 3 个属性都只针对 type="image"，src 属性规定显示为提交按钮的图像的 URL。alt 属性定义图像输入的替代文本。width 和 height 规定 <input>元素的宽度/高度。
(2)、隐藏字段
type="hidden" 用于定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。
1 <form method="post" action="demo.php"> 2 姓名: <input type="text" name="user"><br/> 3 <input type="hidden" name="country" value="China"> 4 <input type="submit" value="提交"> 5 </form>
(3)、选择文件
type="file" 用于定义文件选择字段和 "浏览..." 按钮，供文件上传。
1 <form method="post" action="demo.php"> 2 选择一个文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/> 3 <input type="submit" value="提交"> 4 </form>
accept 属性仅适用于 <input type="file">。该属性规定了可通过文件上传提交的服务器接受的文件类型。如需要多个文件类型，每个值可以使用逗号分隔。注意：不要将该属性作为验证工具，应该在服务器上对文件上传进行验证。
以下都是 input 元素在 HTML5 中的新类型：
(4)、Email
type="email" 用于定义邮箱地址的字段，当提交表单时会自动对 email 字段的值进行验证。
Email: <input type="email" name="usre">
(5)、电话号码
type="tel" 用于定义用于输入电话号码的字段。
电话号码: <input type="tel" name="mobile">
(6)、拾色器
type="color" 用于定义从拾色器中选取颜色。
选择你喜欢的颜色: <input type="color" name="likecol">
(7)、搜索字段
type="search" 定义用于输入搜索字符串的文本字段，比如站内搜索。
查查看: <input type="search" name="lookup">
目前，浏览器对于该类型的支持不是很好。
(8)、URL
type="url" 定义用于输入 URL 的字段。
添加你的主页: <input type="url" name="homepage">
(9)、数字字段
type="number" 定义用于输入数字的字段，可以设置可接受数字的限制。
数量 ( 1 到 5 之间): <input type="number" name="num" min="1" max="5">
min 和 max 属性可用于规定 <input> 元素的最小/最大值。value 属性可规定默认值。step 属性可规定 <input> 元素的合法数字间隔。实例：如果 step="3"，则合法数字应该是 -3、0、3、6，以此类推。该属性可以与 min 和 max 属性配合使用，以创建合法值的范围。
type="range" 定义用于精确值不重要的输入数字的控件，比如 Slider.js，一个轻量级图片播放控件。也可以设置可接受数字的限制。用来规定限制的属性同 number 类型相同。
(10)、日期
type="time" 定义用于输入时间的控件（不带时区）。
type="date" 定义 date 控件。
type="datetime" 定义 date 和 time 控件（带有时区）。
type="datetime-local" 定义 date 和 time 控件（不带时区）。
type="month" 定义 month 和 year 控件（不带时区）。
type="week" 定义 week 和 year 控件（不带时区）。
8、其他表单标签
(1)、表单边框
<fieldset> 标签定义围绕表单中元素的边框。<legend>标签用于定义 fieldset 元素的标题。
1 <form method="post" action="demo.php"> 2 <fieldset> 3 <legend>个人信息:</legend> 4 姓名: <input type="text"><br/> 5 籍贯: <input type="text"><br/> 6 邮箱: <input type="email"><br/> 7 家庭住址: <input type="text"> 8 </fieldset> 9 </form>
在 HTML5 中还增加了3个新标签：
(2)、<datalist>
<datalist> 标签规定了 input 元素可能的选项列表。如下：
1 <form method="post" action="demo.php"> 2 <input list="browser" name="explorer" autofocus> 3 <datalist id="browser"> 4 <option value="IE"> 5 <option value="Firefox"> 6 <option value="Chrome"> 7 <option value="Safari"> 8 <option value="Opera"> 9 </datalist> 10 <input type="submit"> 11 </form>
<datalist> 标签被用来为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。注意：必需使用 <input> 元素的 list 属性来绑定 <datalist> 元素。该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项，该属性值为绑定到 <input> 元素的 datalist 的 id。
autofocus 属性用于规定当页面加载时 <input> 元素应该自动获得焦点。
(3)、<output>
<output> 标签作为计算结果输出显示，比如执行脚本的输出。如下：
1 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)"> 2 0<input type="range" id="x" value="50">100 3 +<input type="number" id="y" value="50">= 4 <output name="sum" for="x y"></output> 5 </form>
该标签有一个重要属性 for 规定一个或多个元素的 id 列表，以空格分隔，用于描述计算中使用的元素与计算结果之间的关系。name 属性定义对象的唯一名称，在表单提交时使用。
(4)、<keygen>
<keygen> 规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。如下：
1 <form method="post" action="demo.php"> 2 用户名: <input type="text" name="usre"><br/> 3 加 密: <keygen name="security" keytype="rsa"> 4 <input type="submit"> 5 </form>
该标签有一个重要属性 keytype 用于定义密钥的安全算法，该属性规定应该使用哪种密钥生成算法，安全算法有3种：rsa为默认，规定 RSA 安全算法，RSA 密钥强度可由用户选择。dsa 规定 DSA 安全算法，DSA 密钥长度可由用户选择。ec 规定 EC 安全算法，EC 密钥强度可由用户选择。注意：不同的浏览器对密钥生成算法的支持会有所变化。
9、HTML 表格
创建表格的四个元素：table、tr、th、td
<table>…</table>：整个表格以 <table> 标记开始，以 </table> 标记结束。
<tr>…</tr>：表格的一行，所以有几对 tr 表格就有几行。
<th>…</th>：表格的头部的一个单元格，表格表头。
<td>…</td>：表格的一个单元格，一行中包含几对 <td>...</td>，说明一行中就有几列。表格中列的个数，取决于一行中数据单元格的个数。
基本语法：
1 <table border="1"> 2 <tr> 3 <th>姓名</th> 4 <th>性别</th> 5 <th>工号</th> 6 </tr> 7 <tr> 8 <td>小白</td> 9 <td>男</td> 10 <td>123</td> 11 </tr> 12 <tr> 13 <td>初夏</td> 14 <td>女</td> 15 <td>321</td> 16 </tr> 17 </table>
此外，还有几个相当重要的表格标签，用于优化和组合表格元素：caption、thead、tbody、tfoot
<caption>…</caption>：定义表格的标题，该标签必须放置在 <table> 元素之后，作为第一个子元素，并且一个表格只能定义一个标题。通常这个标题居中于表格之上，可以通过 CSS 属性 "text-align" 和 "caption-side" 来设置标题的对齐方式和显示位置。
<thead>…</thead>：用于组合 HTML 表格的表头内容。该元素必须作为 <table> 元素的子元素，并且出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
<tbody>…</tbody>：用于组合 HTML 表格的主体内容。当表格内容非常多时，表格会下载一点显示一点，但如果加上 <tbody> 标签后，这个表格就要等表格内容全部下载完才会显示。该元素必须作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。
<tfoot>…</tfoot>：用于组合 HTML 表格的页脚内容。该元素必须作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。
注意：<thead>、<tbody>、<tfoot> 元素应该结合起来使用，用来规定表格的各个部分。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。在使用这3个元素时，在内部必须包含一个或者多个 <tr> 标签。
带有标题的表格：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 <style> 7 caption{ 8 font-size:20px; 9 font-weight:bold; 10 margin-bottom:10px; 11 } 12 table,th,td{ 13 border:2px solid black; 14 padding:5px; 15 } 16 .tab{ 17 width:40%; 18 border-collapse:collapse; 19 } 20 .tab th{ 21 background:yellow; 22 } 23 .tab td{ 24 text-align:center; 25 background:lightgreen; 26 } 27 </style> 28 </head> 29 <body> 30 <table border="1" class="tab"> 31 <caption>商品列表</caption> 32 <thead> 33 <tr> 34 <th>商品名称</th> 35 <th>价格（元）</th> 36 <th>生产日期</th> 37 </tr> 38 </thead> 39 <tbody> 40 <tr> 41 <td>洗衣机</td> 42 <td>1999.00</td> 43 <td>2016-2-1</td> 44 </tr> 45 <tr> 46 <td>电视机</td> 47 <td>3999.00</td> 48 <td>2016-2-2</td> 49 </tr> 50 <tr> 51 <td>电冰箱</td> 52 <td>2999.00</td> 53 <td>2016-2-8</td> 54 </tr> 55 </tbody> 56 </table> 57 </body> 58 </html>
CSS 的 border-collapse 属性是表格属性, 可以设置表格的边框是否合并为一条，还是像在标准的 HTML 中那样分开显示。默认值为 separate 边框分开，不会忽略 border-spacing 和 empty-cells 属性。collapse 边框合并，如果相邻，则共用一个边框，会忽略 border-spacing 和 empty-cells 属性。border-spacing 属性设置相邻单元格的边框间的距离，仅用于"边框分开"样式。用于规定相邻单元的边框之间的距离，不允许负值，如果设置1个参数，定义的是水平和垂直间距。如果是2个参数，那么第一个设置水平间距，而第二个设置垂直间距。empty-cells 属性设置是否显示表格中的空单元格，仅用于"边框分开"样式。默认值为 show 表示空单元格显示边框。hide 为不在空单元格周围显示边框。
表格表头竖直显示：
1 <table border="1"> 2 <caption>商品列表</caption> 3 <tr> 4 <th>商品名称</th> 5 <td>洗衣机</td> 6 <td>电视机</td> 7 <td>电冰箱</td> 8 </tr> 9 <tr> 10 <th>价格（元）</th> 11 <td>1999.00</td> 12 <td>3999.00</td> 13 <td>2999.00</td> 14 </tr> 15 <tr> 16 <th>生产日期</th> 17 <td>2016-2-2</td> 18 <td>2016-2-8</td> 19 <td>2010-2-10</td> 20 </tr> 21 </table>
<th> 和 <td> 元素有2个重要属性 rowspan 和 colspan，rowspan 用于设置单元格可横跨的行数。colspan 用于设置单元格可横跨的列数。
跨行跨列的表格：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 <style> 7 caption{ 8 font-size:20px; 9 font-weight:bold; 10 margin-bottom:10px; 11 } 12 table,th,td{ 13 border:2px solid black; 14 padding:10px; 15 } 16 .tab{ 17 width:40%; 18 border-collapse:collapse; 19 } 20 .tab th{ 21 background:yellow; 22 } 23 .tab td{ 24 text-align:center; 25 background:lightgreen; 26 } 27 </style> 28 </head> 29 <body> 30 <table border="1" class="tab"> 31 <caption>促销信息</caption> 32 <thead> 33 <tr> 34 <td colspan="3" style="text-align:left;font-weight:bold;">新华书店</td> 35 </tr> 36 <tr> 37 <th>类 目</th> 38 <th>书 名</th> 39 <th>价 格（元）</th> 40 </tr> 41 </thead> 42 <tbody> 43 <tr> 44 <td rowspan="3">图书</td> 45 <td>HTML5 基础</td> 46 <td>29.00</td> 47 48 </tr> 49 <tr> 50 <td>CSS3 精通</td> 51 <td rowspan="2">52.00</td> 52 </tr> 53 <tr> 54 <td>JS 精华</td> 55 </tr> 56 <tr> 57 <td>数码</td> 58 <td colspan="2">一律半价</td> 59 </tr> 60 </tbody> 61 </table> 62 </body> 63 </html>
