用桌子设计

Question

我一直在设计无桌面网站。问题是它可能需要很长时间才能完成网站。使用表格设计的人可以更快地完成。什么是一个很好的教程或相关的做这样的事情？

我知道这是错的，但我注意到很多客户并不关心，他们希望他们的网站尽快。这样做的方式，取决于网站可以永远。

PS：我已经尝试过设计这个网站，比如Photoshop或Illustrator，然后将设计导出为网页，但是当涉及到修改设计时，我无法绕过让网站正确显示..通常我很生气并开始手工编码。我发现手工编码比其他任何东西都容易。我认为这是一个坏习惯或可以。我需要更长时间手工操作。

Answer 1

基于表格的布局非常简单，至少在概念上如此。表格以<table>开头，以</table>结尾。在里面你有零行或多行（<tr>...</tr>），其中你有零个或多个列（<td>...</td>）。还有一些其他标记（thead / tbody / tfoot，th用于标题单元格，但这实际上只需要了解表格 - 无需教程。

表的主要优点是：

1. 表格的大小根据内容的大小进行调整
2. 列总是排成一行，便于垂直排列内容
3. 简单的代码 - 基本结构所需的几行HTML
4. 普遍支持 - 桌子在旧/怪异的浏览器中看起来和行为正常（我在看着你，IE！）

表的缺点包括与div和CSS的“复杂”关系状态，更不用说同伴的鄙视了。表格不是div和CSS的完全替代品，但不要让任何人告诉您，div和CSS也是表格的完全替代品。

在尝试设置表格样式时，您可以使用一些内容使其看起来像您想要的那样：

1. border - 这定义了表格单元格周围和之间的边框
2. padding - 这是内容与单元格边缘之间的填充量
3. text-align - 单元格内容的水平对齐
4. vertical-align - 单元格内容的垂直对齐（对垂直居中很有用！）
5. border-collapse - 您可以折叠边框以移除单元格之间的任何间距

Answer 2

W3Schools在这里有一个非常好的教程：

http://www.w3schools.com/html/html_tables.asp

您可能需要花时间研究使用DIV，CSS等，因为从Photoshop导出网站和Illustrator只会在您需要进行小调整时让您头疼。 （以及许多其他场景。）

Answer 3

如果您使用表格，如果您尝试使用任何花哨的DHTML，您将会遇到更多麻烦。表元素不是块元素，它们不是框元素，而是表格。

如果您只有一个没有javascript的静态HTML网站，那么您的问题就不那么严重了，但是表格设计的一点是分离设计和结构。学习css需要付出麻烦。

例如，当您想要稍后进行调整时，忘记了不得不寻找表格布局设计的好处和缺点，将所有设计规则放入css文件可以减少客户端的后续下载，因为您的css甚至会被缓存如果您的标记页面是通过PHP动态生成的。这使您的网站加载速度更快。

无论如何，许多开发人员可以创建css无表格布局，因为快速的其他人创建了一些丑陋的table + spacer.gif网站。

Answer 4

问题不在于div布局的教程吗？我刚刚读了一本关于网页可访问性的书，它以非常强的术语表达了对div布局的偏好。

Answer 5

您的论证是有效的，使用表格编写网站的速度要快得多。表格的问题在于，从长远来看，它们难以维护。通过使用div，您在将来调整样式或布局更改时会有更简单的时间。

如果您正在创建的网站需要（非常）很少甚至没有将来的维护，那么表格可能会更好/更快。但是，如果您计划在未来对网站设计/布局进行更改（即使只是平均数量的更改/修复），以div为中心的设计将会更有价值。

Answer 6

网上有很多教程，但我会采用不同的方法来回答。

您是创建这些页面以正确的方式做事还是为业务目的创建它们？

如果是前者，请尽可能多地了解CSS类型的解决方案。无论如何你应该这样做，但不要让它妨碍交付。

如果是后者，我怀疑客户关心的是代码背后的“纯粹”，只要看起来没问题。他们主要关注的是所有主流浏览器的交付速度和良好的渲染效果。

这就是为什么我仍然使用表格来布局我提供给客户的东西。我也只在三个浏览器上测试它（我不会说哪个），因为这是我的所有客户关心的。他们真的不在乎iPhone上的Opera（例如）是否正确呈现，因为那不是他们的目标市场。

Answer 7

也许我是Luddite，但我认为使用表格进行页面布局没有任何问题。它可以在任何地方使用，正如您所说，用户理所当然地不在乎。请注意，我说 a 表;多个嵌套表站点是维护的噩梦。而且只是因为你在线框上使用表格并不意味着你不应该广泛使用CSS来设置它和你网站的其他部分的样式。

Answer 8

您可以使用正确的HTML标记，然后在CSS中使用display属性的various different table-related values来充分利用这两个世界。

至于使用 HTML 中的表格，这就是W3C所说的（见Tables in HTML documents）：

  

表格不应仅用作表格   意味着将文档内容布局为   这可能会出现问题   渲染到非可视媒体。   此外，与图形一起使用时，   这些表可能会强制用户滚动   水平查看设计的表格   在具有更大显示器的系统上。至   作者，尽量减少这些问题   应该使用样式表来控制   布局而不是表格。

史蒂夫

Answer 9

如果你喜欢桌子，知道桌子，他们不会错，然后坚持下去，但“去div”可以相当自由。你确实需要了解定位，我没有找到比下面更好的教程来教你如何定位div

http://www.barelyfitz.com/screencast/html-training/css/positioning

Answer 10

我知道的最好的教程网站是htmldog，尽管名称很大，但主要是关于css。

另外两个使用div复制表格的宝贵网站是：

1. Faux columns（用于制作div 等高
2. 这个网站，将会 生成基本的跨浏览器 页面布局html和css为你： http://fu2k.org/alex/css/onetruelayout/example/interactive

坚持使用div - 当你习惯它时，它将成为第二天性，甚至可能比表更快

Answer 11

在HTML网页创建中，页面上的表创建已经在内容体内声明，这个表可以声明 <table>以</table>结尾，然后是表标题<theader></theader> 然后初始化行<tr>content</tr>使用<td>content</td>表格边框插入表格数据，并在css中声明宽度高度字体样式字体粗细背景。