by Anthony Ng

由Anthony Ng

<table>偏见和HTML仇外心理 (<table> prejudice and HTML xenophobia)

I was looking over some HTML with a student the other day when we stumbled onto a <table>.

前几天，当我偶然发现一个<table>时，我正在和一个学生一起看一些HTML。

It displayed data with restaurant reservation information. The first column held the names for the reservation. The second column held the time of the reservation.

它显示了带有餐厅预订信息的数据。第一列包含预订的名称。第二栏是保留时间。

It looked like this:

它看起来像这样：

“Oh wow, I can’t believe this code is actually using a table. What is this, the 90's?” — my student

“噢，我真不敢相信这段代码实际上是在使用表格。这是什么，九十年代？” —我的学生

Back in the 90’s, tables were all the rage. Developers would use tables throughout their HTML to format non-tabular content.

上世纪90年代，餐桌风靡一时。开发人员将在整个HTML中使用表格来格式化非表格内容。

But the pendulum swung back. Tables fell out of fashion. And their reputation as a user interface element has never recovered.

但是钟摆向后摆动。桌子不合时宜。他们作为用户界面元素的声誉从未恢复。

So my student started brainstorming of ways he could code this reservation information the “right” way.

因此，我的学生开始集思广益，以一种“正确”的方式来编码此预订信息。

“I know — we’ll use lists.”

“我知道-我们将使用列表。”

“OK.” I said. “So you would use two lists? One for the name, and one for the time?”

“好。” 我说。 “因此，您将使用两个列表？一个叫名字，一个叫时间？”

“Yes. And I’ll use CSS to style it to look like a table.”

“是。我将使用CSS对其进行样式设置，使其看起来像表格。”

His distaste for tables and the ways they’d been abused in the past was leading him to abuse a different HTML element instead.

他对表的厌恶以及过去滥用表的方式导致他滥用了另一个HTML元素。

And this got me thinking: are other developers bending over backward to avoid using tables as well?

这让我想到：其他开发人员是否也向后弯腰以避免使用表？

为什么要使用表格？他们是干什么的？ (Why use tables? What are they for?)

According to Mozilla Developer Network’s documentation, tables present tabular data.

根据Mozilla开发人员网络的文档，表提供表格数据。

I like to think of tabular data as data that has relationships within it. Was there a relationship between each reservation? Yes, each reservation time was associated with a specific name.

我喜欢将表格数据视为内部具有关系的数据。每次预订之间有关系吗？是的，每个预订时间都与一个特定名称相关联。

It’s totally appropriate and semantic to use tables to represent tabular data. CSS Frameworks like Bootstrap even support styled tables. Tables are meant to be used!

使用表来表示表格数据是完全适当和语义的。像Bootstrap这样CSS框架甚至都支持样式表。必须使用表格！

So where did all this hate come from?

那么所有这些仇恨是从哪里来的呢？

Back in the day, tables were used for formatting and layout purposes. Take a look at this example (or view it interactively on Codepen):

过去，表格用于格式化和布局目的。看一下这个例子(或在Codepen上交互查看)：

<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>

These 3 tables created this 2-column layout for us.

这3个表格为我们创建了这种2列布局。

With modern advances in CSS, we don’t need to use tables as a hack for page layout. Take a look at this rewritten example using CSS which produces the same 2 column layout (view on Codepen):

随着CSS的最新发展，我们不需要将表格用作页面布局的工具。看一下使用CSS重写的示例，该示例产生相同的2列布局(在Codepen上查看 )：

// 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 fileheader,footer {  text-align: center;}

div {  display: flex;}

表格布局不会消失 (Table layouts aren’t going away)

Your stomach might wrench when looking at that code using tables for layout. But this technique isn’t going away any time soon.

使用表格进行布局查看该代码时，您的肚子可能会感到不知所措。但是这种技术不会很快消失。

Many developers find cross-browser testing to be difficult, but consider how many different email clients there are.

许多开发人员发现跨浏览器测试很困难，但要考虑有多少个不同的电子邮件客户端。

Email clients lack strong, consistent support for certain CSS styles. Tables provide a reliable way to achieve a consistent layout across multiple email clients and devices.

电子邮件客户端缺乏对某些CSS样式的强大而一致的支持。表提供了一种可靠的方法，可以在多个电子邮件客户端和设备之间实现一致的布局。

学习您HTML (Learn your HTML)

My advice is to get a feel for which tools are available to you. Most importantly, use the correct tool for the job. Sure, you could use a hammer to drive a screw into a wall. But wouldn’t a screw driver work better?

我的建议是让您了解可以使用哪些工具。最重要的是，使用正确的工具进行作业。当然，您可以使用锤子将螺钉拧入墙壁。但是螺丝刀不会更好地工作吗？

Many of us developers will happily investing time in learning advanced JavaScript features, algorithm optimizations, and new frameworks. But when it comes to HTML elements, most of us stick with what’s already comfortable.

我们中的许多开发人员将很乐意花时间在学习高级JavaScript功能，算法优化和新框架上。但是当涉及到HTML元素时，我们大多数人坚持使用已经很舒适的东西。

Have you ever consider learning about HTML elements beyond the old standbys: <div>, <span>, <h1>, and <p>?

您是否考虑过学习除旧备用记录之外HTML元素：<div>，<span>，<h1>和<p>？

For example, there’s the <dl> element, which might be useful when writing a glossary.

例如，有一个<dl>元素，在编写词汇表时可能很有用。

Then there’s the <time> element. It will allow browsers to schedule events to your user’s calendar.

然后是<time>元素。它将允许浏览器将事件安排到您的用户日历中。

Were you about to use the <b> element to make something look important by making it bold? Consider using the <strong> element instead. Screen readers don’t communicate styling to the users. But they would communicate the semantic meaning of the <strong> element.

您是否打算使用<b>元素将其变为粗体，从而使其看起来很重要？考虑使用<strong＆ gt; 元素代替。屏幕阅读器不会将样式传达给用户。但是他们会传达<strong>元素的语义。

Are you importing a library to get a color picker or calendar on your screen? Consider using <input type=”color” /> or <input type=”date”> to use what the browser gives you.

您是否要导入库以在屏幕上显示颜色选择器或日历？考虑使用<input type =“ color” />或<input type =“ date”>来使用浏览器提供的功能。

Take a moment to familiarize yourself with some of the HTML elements that are available to you.

花一点时间来熟悉一些可用的HTML元素。

And next time you’re working HTML, ask yourself whether you’re reaching for the right tool.

下次您使用HTML时，请问自己是否正在寻找合适的工具。