HTML 表单和表格

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 属性。如下：

 <form method="post" action="demo.php">
     <label for="name">用户名:</label>
     <input type="text" name="username" id="name" value="小白"><br/>
     <label for="pass">密　码:</label>
     <input type="password" name="password" id="pass" placeholder="请输入密码">
 </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 属性值相同。如下：

 <form method="post" action="demo.php">
     <label for="male">男</label>
     <input type="radio" id="male" name="gender"><br/>
     <label for="female">女</label>
     <input type="radio" id="female" name="gender"><br/>
     <label for="email">邮箱</label>
     <input type="email" id="email" placeholder="请输入邮箱地址">
 </form>

3、文本域

　　文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过 <textarea> 标签完成，如下：

 <form method="post" action="demo.php">
     <label for="txt">发表意见：</label><br/>
     <textarea cols="50" rows="10" id="txt">在这里输入内容...</textarea>
 </form>

　　注意：<textarea> 标签是一对闭合标签，成对出现，在开始标签和结束标签之间可以输入默认值，cols 和 rows 属性则定义文本域的行数和列数，更好的办法是使用 CSS 的 width 和 height 属性来定义文本与的大小，width 代替 cols，height 代替 rows。

4、选择框

　　选择框可以让用户做出选择，在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML 中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。定义选择框通过 <input> 标签完成，不同的是输入类型。

　　(1)、单选框

　　type="radio" 定义了单选框，也叫单选按钮，允许用户在一定数量的选择中选取一个选项。如下：

 <form method="post" action="demo.php">
     <label for="love">喜　欢</label>
     <input type="radio" id="love" name="like" value="喜欢" checked><br/>
     <label for="noLove">不喜欢</label>
     <input type="radio" id="noLove" name="like" value="不喜欢"><br/>
     <label for="casual">无所谓</label>
     <input type="radio" id="casual" name="like" value="无所谓"><br/>
 </form>

　　(2)、复选框

　　type="checkbox" 定义了复选框，允许用户可以选择多个选项。如下：

 <form method="post" action="demo.php">
     <label for="tool1">自行车</label>
     <input type="checkbox" id="tool1" name="bike" value="自行车"><br/>
     <label for="tool2">汽　车</label>
     <input type="checkbox" id="tool2" name="car" value="汽车"><br/>
     <label for="tool3">飞　机</label>
     <input type="checkbox" id="tool3" name="plane" value="飞机" checked><br/>
     <label for="tool4">火　箭</label>
     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>
     <label for="tool5">毛　线</label>
     <input type="checkbox" id="tool5" name="wool" value="毛线">
 </form>

　　value 属性值是必需的，为提交数据到服务器的值，供后台程序使用。name 属性为输入控件命名，供后台程序使用，checked 属性规定在页面加载时应该被预先选定的 <input> 元素。该属性只适用于 <input type="radio"> 和 <input type="checkbox">。checked 属性用于设置默认选项，即该选项会被默认选中。该属性也可以在页面加载后，通过 JavaScript 代码进行设置。

　　注意：同一组的单选按钮，name 属性取值一定要一致，比如上面例子为同一个名称“like”，这样同一组的单选按钮才可以起到单选的作用。同一组的复选框，name 属性取值可以一致，这样方便为其定义样式，或者通过 JS 获取元素。

5、下拉列表框

　　下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、也可以多选。下拉列表框通过 <select> 标签 和 <option> 标签完成。

　　(1)、下拉列表单选框

 <form method="post" action="demo.php">
     <label for="like">喜欢：</label>
     <select id="like" name="cars">
         <option value="奥迪">奥迪</option>
         <option value="宝马">宝马</option>
         <option value="奔驰">奔驰</option>
         <option value="宾利">宾利</option>
         <option value="路虎">路虎</option>
     </select>
 </form>

　　(2)、下拉列表复选框

 <form method="post" action="demo.php">
     <label for="like">喜欢：</label>
     <select id="like" name="cars" multiple>
         <option value="奥迪">奥迪</option>
         <option value="宝马">宝马</option>
         <option value="奔驰">奔驰</option>
         <option value="宾利">宾利</option>
         <option value="路虎" selected>路虎</option>
     </select>
 </form>

　　<select> 标签定义下拉列表选项，而 <option> 标签定义下拉列表中的选项。

　　下拉列表单选框和下拉列表复选框，唯一的不同就是复选框使用了 multiple 属性实现了多选功能，下拉列表可以进行多选操作就是在 <select> 标签中设置了 multiple 属性，该属性用于规定可同时选择多个选项，需要注意：下拉列表框根据选项的个数(单选/复选)，会在网页上呈现不同的显示效果。在不同的操作系统，选择多个选项的方法也不同，在 windows 操作系统下，需要按住 Ctrl 键来选择多个选项，而在 Mac 系统下，需要按住 Command 键来选择多个选项。

　　<option> 标签的 value 属性值为向服务器提交的值，selected 属性则表示该选项被默认选中，即首次在列表中时表现为选中状态。该标签需要与 <select> 标签配合使用，否则这个标签是没有任何意义的。

　　<select> 元素是一种表单控件，可用于在表单中接受用户输入。还元素有几个重要属性，required 属性规定用户在提交表单前必须选择一个下拉列表中的选项。autofocus 属性规定在页面加载时下拉列表自动获得焦点。size 属性规定下拉列表中可见选项的数目。由于各属性之间的差异，需要告诉用户是否可以多项选择，对用户更友好的方式是使用复选框。

　　如果有很多的选项组合，就可以使用 <optgroup> 标签能够很简单的将相关选项组合在一起。该标签经常用于把相关的选项组合在一起。如下：

 <form method="post" action="demo.php">
     <label for="like">喜欢：</label>
     <select>
         <optgroup label="国产">
             <option value="奇瑞">奇瑞</option>
             <option value="大众">大众</option>
             <option value="现代">现代</option>
             <option value="哈弗">哈弗</option>
             <option value="比亚迪">比亚迪</option>
         </optgroup>
         <optgroup label="进口">
             <option value="兰博基尼">兰博基尼</option>
             <option value="雷克萨斯">雷克萨斯</option>
             <option value="凯迪拉克">凯迪拉克</option>
             <option value="玛莎拉蒂">玛莎拉蒂</option>
             <option value="英菲尼迪">英菲尼迪</option>
         </optgroup>
     </select>
 </form>

　　<optgroup> 标签一个重要属性 label 用于为选项组规定描述。

6、按钮

　　在表单中有两种按钮可以使用，分别为：提交按钮和重置按钮。还有一种按钮叫做点击按钮。

　　(1)、点击按钮

　　type="button" 定义一个可点击的按钮，在用户点击按钮时启动一段 JavaScript。

 <input type="button" value="按钮" onclick="show()">
 <script>
 function show(){
     alert("Hello world!");
 }
 </script>

　　(2)、提交按钮

　　当用户需要提交表单信息到服务器时，需要用到提交按钮。type="submit" 用于定义提交按钮。

 <form method="post" action="demo.php">
     <label for="urse">用户名：</label>
     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>
     <label for="password">密　码：</label>
     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>
     <input type="submit" value="提交信息">
 </form>

　　button 和 submit 都是定义一个按钮，不同的是 button 只是一个普通的按钮，主要用于绑定事件，如果不给其绑定事件，那么点击按钮不会有任何反应。而 submit 则是提交按钮，主要用于提交表单，传送数据，如果给 submit 绑定事件，那么点击按钮触发事件的同时，也会提交表单。

　　(3)、重置按钮

　　当用户需要重置表单信息到初始时的状态时，比如用户输入信息后，发现输入错误，那么可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。

 <form method="post" action="demo.php">
     <label for="urse">用户名：</label>
     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>
     <label for="password">密　码：</label>
     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>
     <input type="submit" value="提交信息">
     <input type="reset" value="重置信息">
 </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 改变它们的值。

 <form method="post" action="demo.php">
     姓名: <input type="text" name="user"><br/>
     <input type="hidden" name="country" value="China">
     <input type="submit" value="提交">
 </form>

　　(3)、选择文件

　　type="file" 用于定义文件选择字段和 "浏览..." 按钮，供文件上传。

 <form method="post" action="demo.php">
     选择一个文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>
     <input type="submit" value="提交">
 </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 元素的标题。

 <form method="post" action="demo.php">
     <fieldset>
         <legend>个人信息:</legend>
         姓名: <input type="text"><br/>
         籍贯: <input type="text"><br/>
         邮箱: <input type="email"><br/>
         家庭住址: <input type="text">
     </fieldset>
 </form>

在 HTML5 中还增加了3个新标签：

　　(2)、<datalist>

　　<datalist> 标签规定了 input 元素可能的选项列表。如下：

 <form method="post" action="demo.php">
     <input list="browser" name="explorer" autofocus>
     <datalist id="browser">
         <option value="IE">
         <option value="Firefox">
         <option value="Chrome">
         <option value="Safari">
         <option value="Opera">
     </datalist>
     <input type="submit">
 </form>

　　<datalist> 标签被用来为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。注意：必需使用 <input> 元素的 list 属性来绑定 <datalist> 元素。该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项，该属性值为绑定到 <input> 元素的 datalist 的 id。

　　autofocus 属性用于规定当页面加载时 <input> 元素应该自动获得焦点。

　　(3)、<output>

　　<output> 标签作为计算结果输出显示，比如执行脚本的输出。如下：

 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
     0<input type="range" id="x" value="50">100
     +<input type="number" id="y" value="50">=
     <output name="sum" for="x y"></output>
 </form>

　　该标签有一个重要属性 for 规定一个或多个元素的 id 列表，以空格分隔，用于描述计算中使用的元素与计算结果之间的关系。name 属性定义对象的唯一名称，在表单提交时使用。

　　(4)、<keygen>

　　<keygen> 规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。如下：

 <form method="post" action="demo.php">
     用户名: <input type="text" name="usre"><br/>
     加　密: <keygen name="security" keytype="rsa">
     <input type="submit">
 </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>，说明一行中就有几列。表格中列的个数，取决于一行中数据单元格的个数。

　　基本语法：

 <table border="1">
     <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>工号</th>
     </tr>
     <tr>
         <td>小白</td>
         <td>男</td>
         <td>123</td>
     </tr>
     <tr>
         <td>初夏</td>
         <td>女</td>
         <td>321</td>
     </tr>
 </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> 标签。

　　带有标题的表格：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>表格</title>
 <style>
 caption{
     font-size:20px;
     font-weight:bold;
     margin-bottom:10px;
 }
 table,th,td{
     border:2px solid black;
     padding:5px;
 }
 .tab{
     width:40%;
     border-collapse:collapse;
 }
 .tab th{
     background:yellow;
 }
 .tab td{
     text-align:center;
     background:lightgreen;
 }
 </style>
 </head>
 <body>
 <table border="1" class="tab">
     <caption>商品列表</caption>
     <thead>
         <tr>
             <th>商品名称</th>
             <th>价格（元）</th>
             <th>生产日期</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>洗衣机</td>
             <td>1999.00</td>
             <td>2016-2-1</td>
         </tr>
         <tr>
             <td>电视机</td>
             <td>3999.00</td>
             <td>2016-2-2</td>
         </tr>
         <tr>
             <td>电冰箱</td>
             <td>2999.00</td>
             <td>2016-2-8</td>
         </tr>
     </tbody>
 </table>
 </body>
 </html>

　　CSS 的 border-collapse 属性是表格属性, 可以设置表格的边框是否合并为一条，还是像在标准的 HTML 中那样分开显示。默认值为 separate 边框分开，不会忽略 border-spacing 和 empty-cells 属性。collapse 边框合并，如果相邻，则共用一个边框，会忽略 border-spacing 和 empty-cells 属性。border-spacing 属性设置相邻单元格的边框间的距离，仅用于"边框分开"样式。用于规定相邻单元的边框之间的距离，不允许负值，如果设置1个参数，定义的是水平和垂直间距。如果是2个参数，那么第一个设置水平间距，而第二个设置垂直间距。empty-cells 属性设置是否显示表格中的空单元格，仅用于"边框分开"样式。默认值为 show 表示空单元格显示边框。hide 为不在空单元格周围显示边框。

　　表格表头竖直显示：

 <table border="1">
     <caption>商品列表</caption>
         <tr>
             <th>商品名称</th>
             <td>洗衣机</td>
             <td>电视机</td>
             <td>电冰箱</td>
         </tr>
         <tr>
             <th>价格（元）</th>
             <td>1999.00</td>
             <td>3999.00</td>
             <td>2999.00</td>
         </tr>
         <tr>
             <th>生产日期</th>
             <td>2016-2-2</td>
             <td>2016-2-8</td>
             <td>2010-2-10</td>
         </tr>
 </table>

　　<th> 和 <td> 元素有2个重要属性 rowspan 和 colspan，rowspan 用于设置单元格可横跨的行数。colspan 用于设置单元格可横跨的列数。

　　跨行跨列的表格：

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>表格</title>
 <style>
 caption{
     font-size:20px;
     font-weight:bold;
     margin-bottom:10px;
 }
 table,th,td{
     border:2px solid black;
     padding:10px;
 }
 .tab{
     width:40%;
     border-collapse:collapse;
 }
 .tab th{
     background:yellow;
 }
 .tab td{
     text-align:center;
     background:lightgreen;
 }
 </style>
 </head>
 <body>
 <table border="1" class="tab">
     <caption>促销信息</caption>
     <thead>
         <tr>
             <td colspan="3" style="text-align:left;font-weight:bold;">新华书店</td>
         </tr>
         <tr>
             <th>类　目</th>
             <th>书　名</th>
             <th>价　格（元）</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td rowspan="3">图书</td>
             <td>HTML5 基础</td>
             <td>29.00</td>

         </tr>
         <tr>
             <td>CSS3 精通</td>
             <td rowspan="2">52.00</td>
         </tr>
         <tr>
             <td>JS 精华</td>
         </tr>
         <tr>
             <td>数码</td>
             <td colspan="2">一律半价</td>
         </tr>
     </tbody>
 </table>
 </body>
 </html>