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

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

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

真不敢相信现在还有人在用<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个表格创建了一个两栏式布局:

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

但是随着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的时候,问问自己你是否正在使用正确的工具。

余下全文(1/3)

本文最初发表在www.sdk.cn,文章内容属作者个人观点,不代表本站立场。

分享这篇文章:

请关注我们:

发表评论

电子邮件地址不会被公开。 必填项已用*标注