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時，請問自己是否正在尋找合適的工具。