什么是最好的HTML布局技术? DIV与表格

时间:2016-04-18 05:37:24

标签: html css html-table

我发现使用表格作为主干更容易操作,特别是在垂直对齐时。但我似乎只是在使用带有大量CSS的DIV时找到代码示例,看起来像是在CSS的内部工作方式。

4 个答案:

答案 0 :(得分:1)

使用<table>进行布局被视为黑客攻击。

在CSS出现之前很久以前就已经使用<table>完成了布局。如今,通常的做法是将项目的结构,样式和行为分别分为 HTML,CSS和JavaScript

使用HTML5,推动使用<article><section>等语义标记代替<div>。尽管如此,除非您专门使用表格数据,否则<div>仍然可以比<table>好100%。即使这样,实际的布局样式仍应在CSS中进行。

答案 1 :(得分:1)

目前的最佳做法是使用<div>代替<table>进行布局。

主要原因是:

  • <table>是不灵活的,因为表格布局嵌入在table元素及其子元素的html结构中(即<tr><td>

  • <div>允许使用css进行布局的大量自由,无论其html结构如何

  • 使用css

    可以轻松实现
  • <table>布局

请注意,对于表格数据,最佳做法是使用<table>

另请注意,HTML5 <header> <nav> <article> <section>这样的语义<footer>元素被认为是比{{1}更好的标记选择}}

答案 2 :(得分:0)

<table>是一个HTML元素,应该用于显示格式化数据,表格数据。我们用它来制作网页布局,但我们试图在15年前停止它。

为什么?

因为<table>不是为了制作网站布局而设计的,只是为了显示和排序数据(这在逻辑上就是表格的作用)。但CSS是。 CSS可以为您提供多种思考布局的方法:盒子模型,弹性盒以及display: table等您应该会发现有用的东西。

请记住:HTML提供并构建数据,CSS提供样式。

答案 3 :(得分:0)

回到没有CSS3和flexbox表布局的日子里,因为它&#39;提供了大部分现代css功能。

现代程序员使用<div>和CSS3和/或flexbox。

目前,当我们拥有HTML5时,即使<div>也不是很好的解决方案,因为您网页中的所有元素都有一些含义。现在我们有<nav><section><aside>much more

等元素

不要使用表格进行布局,因为它与div有不同的含义,你可以用CSS实现相同(或者更好)的结果