开发者对<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的时候,问问自己你是否正在使用正确的工具。
本文文字及图片出自 www.sdk.cn
你也许感兴趣的:
- 2024 年 7 个 Web 前端开发趋势
- 前 Mozilla 浏览器工程师:Web 开发的七大奇怪观念,你中招了吗?
- 为何现代 Web 开发如此复杂?
- 搞懂了这几点,你就学会了Web编程
- 关于WEB前端开发的思考与感悟
- 【外评】电脑从哪里获取时间?
- 【外评】为什么 Stack Overflow 正在消失?
- Android 全力押注 Rust,Linux 却在原地踏步?谷歌:用 Rust 重写固件太简单了!
- 【外评】哪些开源项目被广泛使用,但仅由少数人维护?
- 【外评】好的重构与不好的重构
你对本文的反应是: