html 创建表格有那些小技巧，表单中真的有这么多功能吗

html 基础篇（第二篇）

上一篇 html 我们聊了初识 html 的基本常识和所用的浏览器内核以及基础的标签等等，这次我们再聊一聊 html 的表格和表单等语法。这是 html 基础偏的最后一讲，下次就到了前端重要的样式部分了！注意：本系列文章适合新手小白入门学习。文章如有疏漏请指正。

html 中的表格

一般来讲表格是用来展示数据的，而列表是用来布局的，表单是用来收集用户所填写的数据。表格的功能也十分重要，在早期的 html 中基本上都是用表格来布局用户的数据填写和布局。创建表格的三步走

• table：用户定义表格的标签

• tr：用户定义表格中的行

• td：用户定义表格中的单元格

• th：表头的单元格（加粗显示，一般写在表头）

<table>  // 如果是表头的话可以直接设置 th  <th>    <td>表头的标题</td>  </th>  // tr 表示表格行  <tr>  // td 表示行下的第一格    <td>单元格内的文字</td>    ...  </tr></table>

表格属性

• border：设置表格的边框（默认 border = “0” 为无边框）

• cellspacing：设置单元格与单元格边框之间的空白间距（默认为 2 像素）

• cellpadding：设置单元格内容与单元格边框之间的间距

• width：设置表格的宽度 height：设置表格的高度

• align：设置表格在网页中的水平对齐方式：left、（向左）right（向右）、center（居中）

• caption：表示表格的标题，随着表格整体开始动 以上的这些属性都是可以直接在 table 表格中设定的。见 图 1 所示

<table border width="300" height="50" align="center" cellspacing="10" cellpadding="5"  ><caption>我是表格的标题，我随着表格移动</caption>  <tr>    <td></td>    ....  </tr></table>

合并单元格

在表格中也可以有两种的合并操作，一个是跨行合并和跨列合并。

• 跨行合并：rowspan = "2"（2 表示合并的个数）

• 跨列合并：colspan = "2"（2 表示合并的个数）如 图 2 所示

<table>  <tr>     <td>1</td>     // 跨行合并      <td rowspan=2>1</td>   </tr>    <tr>     <td>2</td>  </tr>     <tr>      // 跨列合并     <td colspan="2">3</td>   </tr>    <tr>     <td>4</td>      <td>4</td>   </tr></table>

表格总结

• table：表格标签

• tr：表格行标签

• td：单元格标签

• th：表头单元标签

• caption：表格标题标签

• colspan：跨列合并

• rowspan：跨行合并

表格的划分结构

再有一个关于表格小小的扩展，在表格中其实还有一种形式表示，这种表示形式容易对表格控制，分为三部分，表头、正文和注脚。这样在 chrome 的开发者工具打开，你所看到的是 头部和内容以及尾部三个部分，容易进行管理。如 图 3 所示

• thead：表头

• tbody：正文

• tfoot：注脚

<table>  <thead>    <tr>      <td>表格的头部部分</td>    </tr>  </thead>
  <tbody>    <tr>      <td>表格的内容部分</td>    </tr>  </tbody>
  <tfoot>    <tr>      <td>表格的尾部部分</td>    </tr>  </tfoot></table>

html 中的列表标签

在 html 中还有一种标签是 列表标签，在未来布局的大多数场景中也有大量的使用。特别是整个页面的末尾有大量用到列表标签。列表标签分为有序列表和无序列表。不过在未来 css 中都会对列表和 p、div 标签等等有一个初始化的 css，对它们统一再修改。这在以后 css 中可以详细讲解。

• ul-li：无序列表

• ol-li：有序列表

• dl-dt：自定义列表见 图 4 所示

// 无序列表（使用频率很高）<ul>  <li>1</li>  <li>2</li></ul>
// 有序列表<ol>  <li>1</li>  <li>2</li></ol>
// 自定义列表<dl>  <dt>1</dt>  <dt>2</dt></dl>

表单标签

表单是为了收集用户的信息 input：输入框标签

<input type = "属性值"  value = "你好">

在表单中 value 表示默认的文本值， type 属性值有多种，分别有以下多种

• text：单行文本输入框

• password：密码输入框

• radio：单选按钮

• checkout：复选框

• image：图像形式的提交按钮

• file：文本域

以上基本上都是 input 输入框中 type 的属性值，在这里就不一一展示了，有兴趣可以自己打开编辑器例如下面这个例子试一试。在 type 为 password 中

<input type="password" value="请输入密码">

除此之外，表单中还有 checked 的属性、button 和 submit 以及 reset。

• checked：表示默认选中状态（常见在单选框和复选框中）

• button：普通按钮（普通按钮需要写 value 值，表示按钮上面的名字）

• submit：提交属性（提交不用写 value 值）

• reset：重置按钮

// checked 表示默认选中状态<input type="radio" checked="checked">

label 标签

label：表示标记的标签，label 标签不会在页面中有任何的展示。

<label> 用户名：<input type="text" name="userName"></input> </label>

这段表示在用户鼠标点击“用户名”三个字中的时候就直接可以在 input 中输入内容了，更能增加了用户体验。

textarea 文本域

textarea：表示文本域的内容，通常用于留言板这类的情况。

select 下拉框

select：表示下拉框

<select>  <option>1</option>  <option>2</option>  <option>3</option></select>

但是随着现在 ui 框架的诞生，基本上都不用原生的 select 样式了，其一因为不好看，第二点就是 select 在不同的浏览器中展示出来的样式是不同的。所以一般都用 div 来充当 select，当然这以后会讲，但是一定需要了解 select 是用来干什么的

form 表单域

• form 表单域：实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。

• action：url 地址用于指定接受并处理表单数据服务器程序的 url 地址

• method：get / post 用于设置表单数据的提交方式，取值为 get 或者 post

• name：名称用于指定表单的名称，以区分同一个页面的多个表单

结束语

在这一讲中，整个 html 就结束了，这一讲中主要介绍了 html 常用的属性，牵扯表格和表单等重要的属性，这在将来的工作中有大量的使用到。基础必须得扎实才能走的更远。除此之外，在 html 中还需要学会查文档，自己的理解不到位或者模糊的地方，一定需要查文档，学会分析问题和解决问题的能力在工作中也是必不可少的一部分。日常查文档一般都用 MDN，这个对于前端来说比较权威的网站。

MDN网站链接