开发者对<table>标签的偏见与对HTML的轻视

某一天，我和一个学生正在看HTML代码，我们看到了一个<table>标签。

这个表格显示的是一家餐厅的预定信息。第一栏是预订人的姓名，第二栏是预定时间：

“真不敢相信现在还有人在用<table>标签。现在是90年代吗？” — 我的学生

没错，90年代的时候，<table>标签使用非常广泛。但是时过境迁，这个标签不再被人们所喜欢。

于是我的学生开始头脑风暴：“要是我的话，我会使用列表，然后用CSS调整，让它看上去像个表格。”

我不禁开始想，其他开发者也像他一样，避免使用<table>标签吗？

何为表格？它是做什么用的？

Mozilla Developer Network的文档显示，表格显示的是表格式数据。在我看来，表格内的数据都是彼此联系的。

用表格来显示表格式数据，这是最自然不过的事情了。就连就连Bootstrap等CSS框架都支持样式化表格，它的存在就是为了让我们使用的！

我们为何现在这么不喜欢表格？

过去，表格被用来安排格式和布局，例如下面这段代码：

<table align=”center”>
  <tbody>
    <tr><td>Welcome to this email</td></tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.    Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh. 
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh. 
      </td>
    </tr>
  </tbody>
</table>
<table align=”center”>
  <tr><td>Thank you for reading this email</td></tr>
</table>

代码中的3个表格创建了一个两栏式布局：

但是随着CSS越来越先进，我们不再需要使用表格来安排布局了。看看下面这段CSS代码，它创建了一个相同的两栏式布局：

// html file
<header>
  Welcome to this email
</header>
<div>
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh. 
  </p>
</div>
<footer>
 Thank you for reading this email
</footer>

/*css file*/
header, footer {
  text-align: center;
}
div {
  display: flex;
}

表格布局并未走远

在看到用表格安排布局的代码时，你可能会觉得范围。但是这个技巧短时间内并不会消失。

很多开发者都觉得跨浏览器测试太过复杂，但是你应该想想网络上有多少种电子邮件客户端。

电子邮件客户端缺乏对某种CSS样式的稳定、一贯的支持。表格提供了一个稳定的方式，获得了对多种电子邮件客户端以及设备的一贯性布局支持。

重学HTML

工欲善其事必先利其器。要想完成一个任务，你就必须先找到正确的工具。当然，用锤子也能把螺丝钉砸进木头里，但是用螺丝刀不是更省力吗？

很多开发者都喜欢花大量的时间学习最新的JavaScript函数、算法优化以及新的框架。但是在HTML元素方面，我们中的大部分人多年来都没有任何进步。

你是否考虑过重新学习HTML中那些你不太熟悉的标签？掌握了<div>、<span>、<h1>和 <p>这些常用代码并不代表你已经学会了HTML。

例如<dl>，在编写专业词汇表的时候，这个标签会非常实用。

还有<time>标签，它能够允许浏览器在用户的日历中创建事件安排。

下一次当你想要使用<b>标签来让字体变粗，以达到突出显示的目的时，你可以考虑用<strong>来替代它。因为屏幕阅读器无法让视力有问题的用户听到页面的样式，但是它却可以区分<b>和<strong>之间的区别。

你应该花时间去了解一些你所不熟悉的HTML标签。下次在使用HTML的时候，问问自己你是否正在使用正确的工具。

原文来自:SDK.cn