响应式表格和避免基于表格的布局

分享这
本Steinbuhler
分享

在过去的一年左右,十三水游戏看到了十三水在线游戏方法的变化. 智能手机的普及和移动通信流量的稳步增长,开始让用户期待他们的体验将为他们所使用的设备进行优化. 结果通常被称为“响应十三水在线游戏.” 

简而言之, 响应性包括将相同的内容和功能重新排列,以便它们在移动设备上更容易看到. 因为十三水游戏现在需要考虑如何在多维度上呈现十三水游戏的站点, 人们以前使用的一些老把戏不再有效.

作恶者#1:基于表格的布局.

避免使用表格进行布局

一个正确构建的网站是通过使用HTML并结合CSS来呈现的. CSS会告诉HTML中的元素它们有多大, 他们应该去哪里, 以及它们与页面上其他元素的关系. 正是这种方法允许十三水游戏通过改变CSS来改变桌面和移动体验之间元素的大小和位置.

经常发生, 虽然, 网站管理员是否会使用表格来实现页面的外观和布局. 这意味着它们将创建一个表, 将其行和列用作网格, 然后把它们的内容放到合适的单元格中.

例如,有些人希望使用两列查找他们的内容,并将使用一个表来获取它. 但是因为这个布局是在HTML中,十三水游戏不能在设备之间使用CSS来改变它. 电脑桌面上光滑的两列图形在手机上是无法读取的.

重点是避免在页面布局中使用表格. 应该保留表来显示表格数据.

例如,尺寸或价格图表通常用表格表示. 没有其他切实可行的方式来表达. 但是,即使它是一个适当的用途,你仍然有同样的问题之前. 要么桌子自己压扁以适应手机的宽度,要么水平滚动是必要的. 两种解决方案都不是很好. 十三水游戏需要的是响应表.

如何创建响应表

幸运的是,一些有进取心的人找到了解决这个问题的办法. 我最近实现了在 CSS技巧的网站.

这需要一点HTML/CSS知识来理解, 但它的要点是,包含标签的标题行在桌面上显示,但在移动设备上隐藏. The labels for the data are replaced with a special attribute in the cell called “data-title.”

当表在移动设备上呈现时, each row on the table is shown as two columns; the first column shows the data-title, 这和标题行是一样的, 第二列是数据. 结果是一个完全响应的表. 下面的图片说明了它的含义.

桌面表

desktop-table

响应表

responsive-table 

外卖

It isn’t important you underst和 the inner workings of responsive tables; the takeaway should be that tables should only be used when you have content that is appropriate 和 never for layout purposes. 如果你(或者你的web开发人员)正确地使用了表格,并实现了链接文章中描述的特殊标记, 你可以保持优化的手机体验.

分享这

你有什么想法??

只要签字,你就同意了十三水游戏的 隐私政策.

评论(12)
  • 我推荐Bootstrap作为一个创建响应式网站的好方法

    • 嗨Al -

      我刚开始熟悉Bootstrap. 我看到他们为表实现的解决方案是在该元素上引入水平滚动条. 似乎工作得很好. 这里的解决方案是一种严格的CSS方法,可以重新配置表. 我喜欢它,但它不是实现使表中的数据可读的目标的唯一方法.

  • 桌子设计从未消亡. 我让所有人免费下载我的设计, 永远不要得到负面的反馈, 它们在浏览器上看起来都很好, +智能手机, 有什么问题😉当然, 响应式设计对于那些愿意付钱的人来说是很棒的, 给他们所有的力量

    • 米奇-

      当然,基于表格的布局仍然有效. 但它们很难更新,任何固定宽度的东西都可能在不同的设备上产生一些奇怪的结果. 真正的, 响应的成本要高一些, 但随着移动流量的增长,它正变得不再是一种奢侈品,而更像是用户的期望.

    • 今年是哪一年??!

    • 我想要创建一个完全响应模板,除了表什么都不用. 它是可能的?? 代码不可能比我在bootstrap中看到的代码更臃肿.

  • 嗨本Steinbuhler,

    我有一个不同的要求与响应表. 单选按钮应该出现在列标题名称之前. 例如:在上面的例子中,单选按钮应该出现在“图像”文本之前. 这可能吗?.

    如果你能提供例子,那将对我有很大的帮助.

    • 你好,抱歉,我现在才看到. 我不知道你想要什么. 你能给我发个链接让我看看你在做什么吗?

  • 使用表格布局往往比那些相信HTML/CSS3 Div是一切解决方案的纯粹主义者更有意义.

    我并不是在谈论使用表格来布局网页. Bootstrap或其他一些网格/布局系统是可行的方法. 我更多地参考了设计元素的使用表.

    我使用表格的复杂形式布局或创建的小部件,我使用表格与col/行span组合组的单元格. 但我从不使用嵌套表.
    使用带有流体设计的div来实现同样的目的实际上是不可能的,并且产生的代码远比使用简单的表格所能实现的代码复杂. 表格将使准确定位你的文本,图像,标签等更加容易. 你想要的样子.

    除了, 表不一定比几十个嵌套的div渲染得更慢,甚至附加了更多的样式. 使用固定布局的表格,代码通常也更容易阅读和维护/调试. (给表格添加一个边框,瞧,你就知道会发生什么了……试试50个div). 树脂黄, 当涉及到我部署表的小部件或表单时,我真的不关心搜索引擎.

    总之,对于表格,十三水游戏只是在定位上有了更多的控制,因为CSS还没有提供适当的样式工具.
    甚至网格系统通常也不提供解决方案. 我很乐意在将来改用Flexbox或一些网格系统,但在那之前,我将采取实际的观点,即如果Tables提供更好的服务, 更容易和更一致的方式来布局我的网站的一些设计元素,如小部件或表单,我将愉快地使用它们.

    • 丹,你说的都是真心话.

  • 不幸的是,有时您希望用户能够同时比较功能, 通过将所有这些信息叠加在手机上,用户需要上下移动以进行比较. 肯定有更好的解决方案? 从Excel到Product Promos,这一直是表格格式的魅力所在.

    • 十三水游戏有问题与十三水游戏的价格表与下面的链接 http://www.dtapclinic.com/hiv/hiv-testing/ 而且它的手机响应能力也不强. 请看看这个移动设备的链接
      十三水游戏正在寻找一些解决方案,如果有任何可能性,以解决这个移动设备. 顺便说一下,十三水游戏用的是wordpress. 期待您的建议.

      谢谢.

 
加入每两周接受网络营销建议的16000多人.

只要签字,你就同意了十三水游戏的 隐私政策.

分享这