数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

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

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

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

 

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

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

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

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

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

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

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

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

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

<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

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
开发者对<table>标签的偏见与对HTML的轻视
发布:2016-12-06 11:01:22

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

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

 

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

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

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

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

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

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

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

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

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

<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

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future