实用的Web设计-表简介，第1部分

tech2024-05-14 88

If you take a tour of the poorer neighborhoods in my neck of the woods, you’ll find a lot of single-wide trailers. They aren’t much to live in — they’re ugly, they’re crowded, they leak, they have no style whatsoever — but as domiciles, they’re functional. They work. You can live in one and keep body and soul together.

如果您游览我树林中较贫穷的社区，您会发现很多单面拖车。他们住的地方不多-丑陋，拥挤，漏水，没有任何风格-但是作为住所，它们是功能性的。他们工作。您可以生活在一个之中，并使身心保持在一起。

Drive a few hundred yards in any direction and you find neighborhoods of small, older houses that bear a startling resemblance to the trailer parks down the street. The oldsters around here call them "shotgun houses," named for the prosaic reason that you can fire a shotgun through the front door and the shot will fly through every room of the house before it exits through the back door. The basic floor plans of both are simple: one room "stacked" next to another, next to another, like a single row of alphabet blocks laid end to end.

沿任何方向行驶数百码，您会发现附近的小而老式的房屋与沿街的拖车公园惊人的相似。这里周围的老人们称它们为“ shot弹枪的房子”，其名字之所以平淡无奇，是因为您可以从前门发射fire弹枪，并且该子弹会在房子的每个房间飞出，然后从后门退出。两者的基本平面图都很简单：一个房间“堆叠”在另一个房间旁边，另一个房间，就像一排首尾排列的字母块一样。

Amateurs learn to make Web pages like these shotgun houses, except where the shotgun house is built horizontally, the Web page is built vertically. The elements are stacked one on top of the other, like that same row of alphabet blocks stacked vertically. That’s because most people learn HTML before they learn anything about Web design, and basic HTML is just marked-up text: take a chunk of text, mark it up, insert graphics and horizontal dividers hither and yon, and presto! You’ve got a Website.

业余爱好者学会制作类似于这些shot弹枪房屋的网页，除非except弹枪房屋是水平建造的，而网页是垂直建造的。元素堆叠在一起，就像同一行字母块垂直堆叠一样。这是因为大多数人在学习有关Web设计的任何知识之前都会学习HTML，而基本HTML只是标记的文本：截取一段文本，对其进行标记，插入图形和水平分隔线，然后再加上！您有一个网站。

For many people, this is enough. But for the rest of us, it’s only a beginning. We don’t want to design trailer-park Websites forever; we want to design cathedrals (or at least a nice two-bedroom bungalow with a little sun room and a breakfast nook)!

对于许多人来说，这就足够了。但是对于我们其他人来说，这仅仅是一个开始。我们不想永远设计拖车公园网站；我们要设计大教堂(或至少一个漂亮的两居室平房，有一个小日光室和一个早餐角)！

SitePoint is preparing to release Dan Shafers’ new book HTML Utopia: Designing Without Tables Using CSS. There are plenty of other cutting-edge articles on SitePoint about working with advanced table design, designing "beyond" tables, and the like. I recommend them highly, if you’re ready to step into such a rarefied atmosphere.

SitePoint准备发布Dan Shafers的新书HTML Utopia：使用CSS进行无表设计。 SitePoint上还有许多其他前沿文章，涉及如何使用高级表设计，设计“超越”表等。如果您准备进入这种稀有的氛围，我强烈推荐他们。

However, my "Practical Web Design" series is aimed at us grunts — those of us out there who aren’t really Webmasters (no matter what it might say on our business cards) and who aren’t ready for table-less Web design. With that thought in mind, I created this column. Hopefully, after you read this column and implement some of the material therein, you’ll be ready for the more sophisticated stuff. When that glorious day comes, SitePoint will be ready for you. Until that day comes… SitePoint is here to help you get there.

但是，我的“实用Web设计”系列针对的是我们，这些人不是真正的网站管理员(无论我们的名片上怎么说)，也没有为无表Web设计做好准备的人。。考虑到这一点，我创建了本专栏。希望在阅读本专栏并实现其中的一些资料之后，您将为更高级的内容做好准备。当光荣的一天到来时，SitePoint将为您准备就绪。在这一天到来之前……SitePoint在这里可以帮助您到达那里。

Note to veteran Web designers: this article covers ground you already know very well. Unless you find yourself in need of a refresher, you’ll probably want to skip it and read something more challenging. You might, however, find it useful in teaching someone else how to design tables.

资深Web设计师的注意事项：本文介绍了您已经非常了解的领域。除非您发现自己需要复习，否则您可能想要跳过它并阅读更具挑战性的内容。但是，您可能会发现它在教别人如何设计表格方面很有用。

表格设计基础 (The Basics of Table Design)

Let’s get the basics out of the way first. There are hundreds of sites out there that will help you understand the basics of table layout; some of them are listed below, and there are plenty of others that are as good as, or better than, the ones I’ve included. Don’t forget the countless books on the local bookstore shelves, starting with HTML For Knuckleheads and going all the way through to cutting-edge design titles. I won’t attempt to duplicate the information available in these resources, but I’ll do a quick run-through of the various tags and design attributes of basic table layout. I recommend that you visit some of the sites listed below for additional help on understanding table construction.

让我们先弄清基础知识。有数百个站点可以帮助您了解表布局的基本知识。下面列出了其中的一些，还有许多与我所包括的产品一样好或更好的产品。不要忘记本地书店书架上无数的书籍，从HTML For Knuckleheads开始，一直到最前沿的设计标题。我不会尝试复制这些资源中的可用信息，但是我将快速浏览基本表布局的各种标记和设计属性。我建议您访问下面列出的一些站点，以获取有关了解表构造的其他帮助。

Also worth noting: Marc Gugliuzza reminds us in his SitePoint article, Debate — Hand Coding: The Ultimate Freedom, that laying out tables by hand is probably the most difficult task to perform in HTML. If you’re not going to design a lot of Web pages, it might be worthwhile to use a WYSIWYG code editor such as Dreamweaver (pricey but excellent) or Arachnophilia (free and quite useful) to produce your table layouts. It takes some skull sweat to understand the ins and outs of tables — if it’s not worth your time, by all means let a program do the grunt work. But to quote Marc,

同样值得注意的是：Marc Gugliuzza在他的SitePoint文章“ 辩论—手工编码：终极自由”中提醒我们，手工布置表格可能是用HTML执行的最困难的任务。如果您不打算设计许多Web页面，则可能值得使用所见即所得的代码编辑器(例如Dreamweaver (价格昂贵但出色)或Arachnophilia (免费且非常有用))来生成表格布局。要了解表格的来龙去脉需要花些力气-如果这不值得您花时间，请务必让程序进行繁琐的工作。但是引用马克，

"…For those who are in the business of creating Websites, if you hand code, you will be better off than, and have an advantage over, the people who use WYSIWYG editors to write their code."

“……对于那些从事创建网站业务的人来说，如果您编写代码，与使用所见即所得编辑器编写代码的人员相比，他们会更好，并且比他们有优势。”

Web designers who use a program are at the mercy of their programs. Learning to code by hand gives you complete control over, and mastery of, the code.

使用程序的Web设计人员会受其程序的支配。手工学习编码使您可以完全控制和掌握代码。

Ok, back to it! Once you step into the wonderful, and wonderfully aggravating, world of tables, you’ve left the "shotgun house" paradigm of Web design behind. You’re graduating into a higher level of layout and design.

好的，回到它！一旦进入了精彩而又令人生厌的表格世界，您就离开了Web设计的“ shot弹枪之家”范式。您将进入更高级别的布局和设计。

Take a look at the way your local newspaper is laid out. Ignore the content, just look at how it’s structured. It probably looks something like this:

看看当地报纸的布局方式。忽略内容，只看其结构。它可能看起来像这样：

This 3-column design with header is probably the most popular design style for most Web pages. Coincidence? Not at all. It’s very familiar to most users, who find the familiar design style comforting and easy to navigate. It works, and it makes sense. There are plenty of other design styles, including the even simpler 2-column design (getting rid of the narrow right column), and the more sophisticated "nested float" styles, among many others, but let’s not get ahead of ourselves.

这种带标题的3列设计可能是大多数网页上最受欢迎的设计样式。巧合？一点也不。对于大多数用户来说，这是非常熟悉的，他们发现熟悉的设计风格既舒适又易于导航。它有效，而且很有意义。还有许多其他设计样式，包括更简单的2列设计(摆脱了狭窄的右栏)，以及更复杂的“嵌套浮标”样式，其中包括许多其他样式，但请不要超越自己。

I bet your newspaper’s Website is designed with the same 2- or 3-column style. In fact, I bet 9 out of 10 sites you visit use one variant or another of the 2- or 3-column design layout, if they don’t just use the "shotgun house" style of piling one item of content atop another ad infinitum. If it works so well, why muck around with it?

我敢打赌，您报纸的网站采用相同的2列或3列样式设计。实际上，我敢打赌，您访问的10个网站中有9个使用一种变式或2列或3列设计布局中的另一种，如果它们不只是使用““弹枪式”风格将内容的一个堆放在另一个广告上无限如果效果很好，为什么还要乱扔呢？

垂直比。水平方向 (Vertical Vs. Horizontal Orientation)

I don’t know about you, but I like vertical orientation. Phone books make innate sense to me because their structure suits me. If I’m looking at a cluster of tall buildings, I tend to look up the first, then over and down the next, and so forth.

我对你一无所知，但我喜欢垂直方向。电话簿对我来说是天生的，因为它们的结构适合我。如果我正在看一堆高楼，我倾向于先抬头，然后再抬头，然后再走，等等。

When you’re first building Web pages, the structure of your page is innately vertical — you pile one thing on top of another, like a layer cake. But when you start thinking in terms of designing with tables, you have to break out of the vertical paradigm and start thinking in terms of rows, not columns. Across instead of down. You’ll see what I mean shortly.

首次构建Web页面时，页面的结构与生俱来就是垂直的-将一堆东西叠放在另一堆东西上，就像一块蛋糕。但是，当您开始考虑使用表进行设计时，您必须突破垂直范式，而开始考虑行而不是列。跨越而不是下跌。您很快就会明白我的意思。

桌子101 (Tables 101)

As I said before, there are bazillions of sites out there that will help you with your table structure. For a thumbnail reference, I used SitePoint’s own Beginner’s HTML, Part 3 article by James Ussher-Smith to keep me honest. If you want something really user-friendly, try Lissa Explains It All: Tables for a well-done explanation of table construction. Lissa’s site looks like Ashley and Mary Kate designed it, but the information is valid and presented very well. I’d suggest you load one of those two pages and read them concurrently with this article. Lissa provides some very nice visual examples to accompany her tips.

就像我之前说过的，有成千上万的站点可以帮助您调整表结构。作为缩略图参考，我使用了James Ussher-Smith撰写的SitePoint自己的Beginner's HTML，第3部分文章，以保持诚实。如果您想要真正方便用户的内容，请尝试Lissa Explains It All：Tables ，以对表的构造进行详尽的说明。莉萨(Lissa)的网站看起来像是阿什利(Ashley)和玛丽·凯特(Mary Kate)设计的，但该信息是有效的，并且显示得很好。我建议您加载这两个页面之一，并与本文同时阅读。莉萨(Lissa)提供了一些非常不错的视觉示例，以配合她的技巧。

Everything starts with the basic <TABLE></TABLE> tag. These simple tags enclose a table structure, and tell the Web browser to watch out, table content is coming up.

一切都从基本的<TABLE></TABLE>标记开始。这些简单的标签包含一个表结构，并告诉Web浏览器当心，表内容即将出现。

You should be aware right now that browsers have to untangle a table’s entire structure before they display any of the table’s contents, so an overly fancy or loaded-down table structure will take some time to download and display. That’s why you click into a page and wait, and wait, and wait, while nothing seems to load, and suddenly bang! the entire page appears at once. It’s because the browser had to wend its way through a table layout before it could show anything. Table structures like this can aggravate the average site visitor, who may well click out to go elsewhere before the table can finish loading. Don’t force a single table to carry too much content, force it to be overly complex, or nest too many subsidiary tables inside one overarching, page-encompassing table. Better to use smaller tables and "stack" them one on top of the other.

您现在应该知道，浏览器必须先解散表的整个结构，然后才能显示表的任何内容，因此过于花哨或已加载的表结构将需要一些时间来下载和显示。这就是为什么您单击进入页面然后等待，然后等待，然后等待，而似乎没有任何内容加载，突然爆炸的原因！整个页面一次出现。这是因为浏览器必须先遍历表格布局，然后才能显示任何内容。这样的表结构可能会加重普通的站点访问者，他们很可能会在表完成加载之前单击以转到其他位置。不要强迫单个表携带太多内容，不要强迫它过于复杂，也不要在一个包含页面的总体表中嵌套太多子表。最好使用较小的表并将它们“堆叠”在另一个之上。

Like so many other HTML tags, the <TABLE></TABLE> tags act as "bookends" for your table content. Simple enough.

像许多其他HTML标记一样， <TABLE></TABLE>标记充当表内容的“书挡”。很简单。

The next tag is the <TR></TR> tag. This stands for "table rows." Rows, not columns. When I first started trying to make sense out of table structure, I kept running into a problem visualizing table structure because I wanted to think vertically, not horizontally. It took me more time than it should have to grasp the essential concept of table structure, because I didn’t want to think in terms of rows. I wanted to design "up and down," not horizontally. From my experience with other burgeoning Web designers, I’m not the only person who has run into trouble because of this paradigm shift. Trust me on this: once you make the shift from thinking vertically to thinking horizontally, tables become much, much simpler. And for those of you who naturally think horizontally, you’re entitled to a bit of a laugh at our expense.

下一个标记是<TR></TR>标记。这代表“表行”。行，而不是列。当我刚开始尝试从表格结构中理解时，我一直在可视化表格结构时遇到问题，因为我想垂直思考而不是水平思考。我花了很多时间来理解表结构的基本概念，因为我不想从行的角度去思考。我想设计“上下”，而不是水平设计。根据我与其他新兴Web设计师的经验，我不是唯一因这种模式转变而陷入困境的人。相信我：一旦从垂直思考转变为水平思考，表格就会变得简单得多。对于那些自然而然地横向思考的人，您有资格为我们付出一点笑声。

Anyway, the <TR> tag indicates that a row is being created. The simplest form of table is the following (you might want to follow along by copying the code into Notepad, opening it in a separate browser window, and watching what happens as we move through this):

无论如何， <TR>标记表明正在创建一行。表格的最简单形式如下(您可能需要将代码复制到记事本中，在单独的浏览器窗口中打开它，并观察在此过程中发生的事情，以进行后续操作)：

Hey, what happened to the row I just constructed? Nothing shows up! Well, we haven’t put anything in the row. A table needs cells, or compartments that store actual content. Think of a calendar. The typical calendar has four or five rows, with seven cells per row. You would think the code for a table cell would be <TC>, but you’d be wrong. The code is <TD>, for table data. Now let’s try that table structure again:

嘿，我刚刚建造的那排发生了什么？什么都没有出现！好吧，我们什么都没排。表格需要存储实际内容的单元格或隔离专区。想想日历。典型的日历有四行或五行，每行七个单元格。您可能会认为表单元格的代码将是<TC> ，但是您错了。表数据的代码为<TD> 。现在，让我们再次尝试该表结构：

Arrggh! Still nothing! Well, not really. The structure is there, but since there’s no content, the table won’t display. Let’s put some content in that cell:

啊！依然没有！好吧，不是真的。该结构已经存在，但是由于没有内容，因此该表将不会显示。让我们在该单元格中放入一些内容：

<TABLE> <TR> <TD>Bleah!</TD> </TR> <TABLE>

Now we’ve got something…a lot of code to display one nonsense word. Again, not really. You’re laying the groundwork for something a bit more complex. Let’s add some more cells:

现在我们有了一些东西……很多代码可以显示一个废话。再一次，不是真的。您正在为更复杂的事情打下基础。我们再添加一些单元格：

<TABLE> <TR> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TABLE>

Besides being mildly childish, we’ve succeeded in making a word appear five times in succession. Well, no, we’ve done more. What you may not realize is that in HTML, the table structure itself is rendered invisible by default. In other words, you can’t see the borders. As with certain self-consciously modernistic calendars, you can only see the data. Well, let’s make the border show itself by adding an attribute to the <TABLE> tag. Set the border value at 1, like so:

除了幼稚之外，我们还成功地使一个单词连续出现了五次。好吧，不，我们做得更多。您可能没有意识到，在HTML中，表结构本身默认情况下不可见。换句话说，您看不到边框。与某些自觉的现代日历一样，您只能看到数据。好吧，让我们通过向<TABLE>标记添加属性来使边框显示出来。将边框值设置为1，如下所示：

Now we’ve got something. Not only do we see the data, we see the table structure that contains the data. Before you go any farther, have a little fun changing the value of the border. Try 2, 10, 20, whatever suits you, just to see how big you can make that border. After you’ve exhausted the fun in that little exercise, return the value to 1 and settle in for the next step.

现在我们有了东西。我们不仅看到数据，而且看到包含数据的表结构。在您走得更远之前，请先改变边框的值，然后获得一些乐趣。尝试2、10、20(适合您的任何方式)，以了解您可以制作多大的边框。在完成这一小小的练习后，您将乐趣恢复为1，然后继续下一步。

Basic design note: it makes life much simpler when laying out tables to keep the borders visible while you construct the tables. Your last step, before popping the champagne, can be to turn the borders off.

基本设计说明：布置桌子时，使生活变得更加简单，以便在构造桌子时保持边框可见。在弹出香槟之前，您的最后一步是关闭边框。

Of course you want multiple rows. So let’s do it. Wheee!

当然，您需要多个行。因此，让我们开始吧。哎呀！

<TABLE border="1"> <TR> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TR> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TR> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TABLE>

Fun, huh? Now we’ve got three evenly structured rows of "bleahs" marching along our page. Add a few more rows and a few more cells, and you’ve got a nice structure for a calendar. Not bad for five minutes’ work.

好玩吧现在，我们在页面上前进了三排均匀排列的“漂白剂”行。添加更多的行和更多的单元格，您将拥有一个不错的日历结构。五分钟的工作还不错。

Let’s throw some monkey wrenches into our nice, neat (but limited) table structure. We’ll start by noticing that the cell sizes conform to the content therein — in other words, the cells adjust themselves to fit comfortably around the content, with no wasted space. And since the content is the same in all the cells, the table has a nice, even structure. Let’s change that.

让我们将一些活动扳手插入我们漂亮，整洁(但有限)的表结构中。我们将从注意到单元格大小与其中的内容一致的角度开始，换句话说，单元格会进行自我调整以舒适地适应内容，而不会浪费空间。并且由于所有单元格中的内容都是相同的，因此表具有很好的均匀结构。让我们改变它。

In the second row, third cell, change the content to read:

在第二行第三单元格中，将内容更改为：

<TD>Abracadabra!</TD>

Notice what happens. That cell lengthens itself to accommodate the longer word, but so do the cells directly above and below that particular cell.

注意发生了什么。该单元格会加长以容纳更长的单词，但是直接在该特定单元格上方和下方的单元格也会加长。

If you break the magic word into two parts, using a line break:

如果将魔术词分为两部分，请使用换行符：

<TD>Abra<BR>Cadabra!</TD>

the cell becomes twice as high or as deep, depending on how you look at it. So do the cells in the entire row. Get used to how tables automatically adjust themselves, and you can save yourself a lot of time and trouble designing and redesigning the same table to appear how you want.

电池的高度或深度会变成两倍，具体取决于您的外观。整行中的单元格也是如此。习惯于表格如何自动调整自己，您可以节省很多时间，并且在设计和重新设计同一张表格以显示所需样式时会遇到麻烦。

调整单元格内容 (Aligning Your Cell Contents)

You also notice that the text in the center row automatically aligns itself to the left side of the cell. That’s the default. Let’s change it using the align attribute. Try it with the cell just to the left of the "Abra Cadabra" cell:

您还注意到中间行中的文本自动自动对齐到单元格的左侧。这是默认值。让我们使用align属性对其进行更改。使用“ Abra Cadabra”单元格左侧的单元格来尝试：

<TD align="center">Bleah!</TD>

Now the word is centered in the cell. Want every word in that row center aligned? Instead of painstakingly aligning each cell’s content, just add the attribute to the row instead:

现在，单词在单元格中居中。是否希望该行中心的每个单词对齐？与其费力地对齐每个单元格的内容，不如将属性添加到该行：

It looks the same as before, but trust me, if and when the contents of the rest of that row’s cells get some space to play with, they’ll all center themselves instead of defaulting to the left.

它的外观与以前相同，但是请相信我，如果并且当该行其余单元格的内容有一定空间可玩时，它们将全部居中而不是默认为左侧。

There’s also the VALIGN attribute, which looks very similar, but acts quite differently. For one, it’s an attribute that works with an entire table (i.e. the <TABLE> tags), not the rows or cells. The default is to place the information in the center, with equal space above and below. Most people learn to lean heavily on the <TABLE valign="top"> attribute, which forces the content to align itself vertically from the top. If you have two vertical columns of content that contain unequal amounts of content, you don’t want the "shorter" column to have its content shoved down into the center of the column, leaving an unsightly empty space at the top. Force the content to the top with the VALIGN attribute, and let the bottom of the column have the empty space.

还有VALIGN属性，该属性看起来非常相似，但行为却大不相同。首先，它是一个属性，它适用于整个表(即<TABLE>标记)，而不适用于行或单元格。默认设置是将信息放置在中央，上方和下方均等。大多数人学会了严重依赖<TABLE valign="top">属性，这会强制内容从顶部垂直对齐。如果您有两个垂直的内容列，其中包含不相等的内容量，则不希望“较短”的列将其内容下推到列的中心，而在顶部留有难看的空白空间。使用VALIGN属性将内容强制到顶部，并让列的底部具有空白。

Cellpadding和Cellspacing (Cellpadding and Cellspacing)

Let’s go back to our nonsense table. We might want to give the content in those cells room to breathe — in other words, set it off with some whitespace so that it doesn’t appear constricted by the table borders. Use the CELLPADDING attribute to give your content some elbow room. Try this in your <TABLE> tag:

让我们回到废话表。我们可能希望为这些单元格中的内容提供空间，换句话说，将其设置为一些空白，以使其不会受到表边框的限制。使用CELLPADDING属性为您的内容提供一些肘部空间。在<TABLE>标记中尝试以下操作：

Ahhh, room to breathe! Feel free to play with the padding value to give yourself as much or as little room in the cells as you like, but remember that the padding works indiscriminately — in other words, you can’t align one cell’s content against the left border while using a pad, because the pad won’t give way.

啊，呼吸的空间！可以随意使用padding值来为自己在单元格中留出尽可能多的空间，但是请记住，padding会不加选择地起作用-换句话说，在使用时，您不能将一个单元格的内容与左边框对齐垫，因为垫不会让位。

Now, let’s add some space between the cells themselves, using the CELLSPACING attribute:

现在，我们使用CELLSPACING属性在单元格之间添加一些空间：

Notice how the border itself gets larger? This gives a different appearance than does using the BORDER attribute to make the border larger, and provides whitespace even when the BORDER attribute is set to 0.

请注意边框本身是如何变大的？这与使用BORDER属性使边框变大的外观不同，即使BORDER属性设置为0，也提供空白。

COLSPAN和ROWSPAN (COLSPAN and ROWSPAN)

Okay so far? Good, now let’s get messy. So far we’ve created a group of identical cells that trundle along the page one after another with no variance. This is all well and good, but we can do more. Meet the COLSPAN and ROWSPAN attributes. These are fairly obvious — they cause cells to "span," or stretch across, a column or a row.

到目前为止好吗？好，现在让我们变得混乱。到目前为止，我们已经创建了一组相同的单元格，它们沿页面连续滚动，没有差异。这一切都很好，但是我们可以做更多。满足COLSPAN和ROWSPAN属性。这些是相当明显的-它们使单元格“跨越”一列或一行。

Let’s add a COLSPAN attribute to the first <TD> line of our nonsense table:

让我们在废话表的第一行<TD>添加一个COLSPAN属性：

<TD colspan="2">Bleah!</TD>

Well, that threw things into a tizzy. Your first cell "spans," or stretches over, the first two cells in the second row, and everything else moves to accommodate the stretched cell. One poor fellow is stranded alone, in a column by itself. Essentially, what you’ve done is made one cell occupy the space of two cells, so the table treats it as if it were two cells.

好吧，这使事情变得头昏眼花。您的第一个单元格在第二行中的前两个单元格“跨度”或延伸，其他所有内容都会移动以容纳拉伸后的单元格。一个可怜的家伙独自一人被困在一个专栏里。本质上，您要做的是使一个单元格占据两个单元格的空间，因此表将其视为两个单元格来对待。

Let’s add the COLSPAN attribute to the other rows to compensate, and see if we can tidy things up a bit:

让我们将COLSPAN属性添加到其他行以进行补偿，然后看看是否可以整理一下：

<TABLE border="1" cellpadding="5" cellspacing="5"> <TR> <TD colspan="2">Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TR> <TD>Bleah!</TD> <TD colspan="2">Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TR> <TD>Bleah!</TD> <TD>Bleah!</TD> <TD colspan="2">Bleah!</TD> <TD>Bleah!</TD> <TD>Bleah!</TD> </TR> <TABLE>

Well, that’s a bit more symmetrical. See how they position themselves?

好吧，这更加对称。看看他们如何定位自己？

Now, let’s see what happens with the ROWSPAN attribute. Get rid of all the COLSPAN attributes and change the first <TD> line to read:

现在，让我们看看ROWSPAN属性会发生什么。除去所有的COLSPAN属性，并将第一行<TD>更改为：

<TD rowspan="2">Bleah!</TD>

As you might have expected, the first cell stretches downward two rows, and everything else shifts to compensate… once again, leaving a single cell stranded.

如您所料，第一个单元格向下延伸两行，其他所有内容均发生偏移以补偿……再次使单个单元格陷入困境。

Take some time to experiment with the two attributes, singly and in combinations. You can make one heck of a mess of your table, but you can also get a feel for how they work.

花一些时间单独或组合使用这两个属性。您可以将桌子弄得一团糟，但也可以了解它们的工作原理。

为桌子上色 (Coloring Your Tables)

It’s quite simple to add color to your table structure. You can color the table border itself, or add color to the cells.

向表结构添加颜色非常简单。您可以为表格边框本身着色，也可以为单元格添加颜色。

Color the border itself with the BORDERCOLOR attribute:

使用BORDERCOLOR属性为边框本身上色：

This turns the lines of the border a nice… magenta? Change the thickness of the border to give the entire table a thicker frame:

这使边界线变成了很好的……洋红色？更改边框的粗细以使整个表格的边框更粗：

Use the familiar BGCOLOR attribute in your cells to change the color of the cells themselves:

在单元格中使用熟悉的BGCOLOR属性可以更改单元格本身的颜色：

<TD bgcolor="#3366ff">Bleah!</TD>

Experiment with different color combinations to see what appeals.

试用不同的颜色组合，看看有什么吸引力。

You can also use the BACKGROUND attribute to put a background image in your table, either in your entire table:

您还可以使用BACKGROUND属性将背景图像放置在表格中，也可以放置在整个表格中：

or in a specific cell:

或在特定的单元格中：

<TD background="image.gif">Bleah!</TD>

One neat use of a table, as suggested by Lissa, is to frame a graphic with a colored border:

利萨(Lissa)提出，表格的一种巧妙用法是用彩色边框框住图形：

You can even use two tables, one inside the other, to make a double border:

您甚至可以使用两个表，一个在另一个表中，以制作双边框：

See how the interior table fits inside a single cell of the outer table? This is one example of "nesting" tables. In this example, the nested, or interior, table is just used to provide a border, but using nested tables one inside of the other is a terrific way to handle more complex page layouts. And, speaking of page layouts…

看看内部桌子如何放在外部桌子的单个单元格内？这是“嵌套”表的一个示例。在此示例中，嵌套表或内部表仅用于提供边框，但是在另一个内部使用嵌套表是处理更复杂的页面布局的一种绝佳方法。而且，谈到页面布局...

使用表格进行基本页面布局 (Using Tables to Make a Basic Page Layout)

Tables constrain themselves to fit the content they contain, unless you tell them differently. You can do this simply enough with the HEIGHT and WIDTH attributes for the <TABLE> tag. There are two flavors of HEIGHT and WIDTH: absolute and relative. The first creates a table that is an absolute width as measured in pixels, like so:

除非您以不同的方式告诉表，否则表会约束自己以适合它们包含的内容。您可以使用<TABLE>标记的HEIGHT和WIDTH属性来完成此操作。 HEIGHT和WIDTH有两种风格：绝对风格和相对风格。第一个创建的表是绝对宽度(以像素为单位)，如下所示：

This is optimized for the average 800×600 screen display. It will fit nicely within the display both horizontally and vertically, with just a bit of "cheater" space left over for slightly off-sized displays. Unfortunately, it is just what it says — an absolute value. Therefore, those folks using other displays won’t see a nice table that fills their screen. The folks with a 1024×768 display will see a table in their screen, but will have plenty of unused real estate surrounding it; those few still laboring with a 640×480 display won’t see the entire table, and will have to scroll both horizontally and vertically to see all the content. Not good.

针对平均800×600屏幕显示进行了优化。它将在水平和垂直方向上很好地适合于显示器，只剩下一点“骗子”空间，可用于尺寸稍小的显示器。不幸的是，它就是它所说的-绝对值。因此，那些使用其他显示器的人不会在屏幕上看到一张漂亮的桌子。屏幕尺寸为1024×768的人们将在屏幕上看到一张桌子，但周围有许多未使用的房地产；仍然使用640×480显示屏的少数几个看不到整个表格，必须水平和垂直滚动才能看到所有内容。不好。

A better option for the average table designer is using relative table heights and widths. These use percentages instead of pixel values, to wit:

对于普通表设计者来说，更好的选择是使用相对表的高度和宽度。这些使用百分比而不是像素值来表示：

This fills up 95% of the available display space both horizontally and vertically. Leave one out (typically the HEIGHT attribute), and the table sizes itself to take up 95% of the screen horizontally, but automatically adjusts itself to fit the content vertically. This last option, using a WIDTH percentage but letting the HEIGHT take care of itself, is usually a good choice to go with.

水平和垂直填充了95％的可用显示空间。保留其中一个(通常为HEIGHT属性)，表格的大小将自动占据水平屏幕的95％，但会自动进行调整以垂直适应内容。最后一种选择是使用WIDTH百分比，但让HEIGHT自行处理，通常是一个不错的选择。

Here’s the basic table layout of my own site. I didn’t do anything fancy or groundbreaking — in fact, when I originally designed the page, I had only the fuzziest notion of how to use tables to lay pages out. So I opted for something simple that I could get my mind around, was user-friendly and familiar. So here’s what I did (aping who knows how many other Web pages):

这是我自己网站的基本表格布局。我没有做任何花哨或突破性的事情-实际上，当我最初设计页面时，我只有关于如何使用表来布局页面的最模糊的概念。因此，我选择了一些易于理解的简单易用的，友好的用户界面。因此，这就是我的工作(aping谁知道还有多少其他网页)：

Here’s the code, minus the content. Notice that I’ve centered the entire interior, or nested, table:

这是代码，减去内容。注意，我已经将整个内部或嵌套表居中：

Notice that the <TD> widths add up to 95%. That gives me 5% of my display width to "cheat" with, providing a slender whitespace margin on the left and right sides of the display.

请注意， <TD>宽度的总和为95％。这使我可以将显示器宽度的5％进行“欺骗”，从而在显示器的左侧和右侧提供了细长的空白余量。

There are some issues with this page layout. I originally chose to use a "framing" table with a 600-pixel width because at the time I designed it (around 2001), many of my users let me know they were still using 640×480 displays, and I wanted my page to fit in their displays without the annoying horizontal scroll bar. I’ve asked my newsletter subscribers what they used, and enough of them still use the smaller displays for me to rationalize keeping the width at 600. If I were designing the page today, I’d set the pixel width around 740 or so.

此页面布局存在一些问题。我最初选择使用宽度为600像素的“框架”表，因为在设计该表时(大约在2001年)，许多用户让我知道他们仍在使用640×480显示器，所以我希望页面能够无需烦人的水平滚动条即可适合其显示。我问过我的新闻订阅者，他们使用了什么，他们中的足够多的人仍然使用较小的显示器来合理地将宽度保持在600。如果我今天在设计页面，则将像素宽度设置为740左右。

Also, the entire contents of the page is contained within the framing table, forcing the users’ browsers to download all of the content, graphics, text, JavaScript, and all, before displaying anything. That’s a classic problem, which leads to some users with slower connections being forced to sit and stare for a little while before the page "pops" into view.

同样，页面的全部内容都包含在框架表中，从而迫使用户的浏览器在显示任何内容之前先下载所有内容，图形，文本，JavaScript等。这是一个经典的问题，这导致一些连接速度较慢的用户不得不坐下来凝视一会儿，然后页面才能“弹出”。

And let me reiterate, there’s nothing outstandingly wonderful or different about the page layout I’ve used. I used it as an example simply because it’s a scheme with which I’m familiar. The usability gurus such as Andy King and Jakob Nielsen would have a field day picking my page apart. However, it serves as a starting point. You can set yourself an exercise: improve on it!

让我重申一下，我使用的页面布局没有什么特别的妙处或不同之处。我仅以它为例，因为这是我所熟悉的方案。诸如Andy King和Jakob Nielsen之类的可用性专家将在野外活动中把我的页面分开。但是，它只是一个起点。您可以自己做运动：改进它！

I’ve decided that, rather than redesigning the page with a different table layout, to wait until I’ve mastered CSS enough to redesign the page using the more modern style-sheet driven, tableless design methodology. Since I haven’t mastered CSS well enough to do that yet, and since a large percentage of my audience continues to use older PCs and browsers that choke on modern CSS, my page stays rooted in pre-millennium table design for now. But hey, it works, and for the moment, that’s good enough for lazy old me.

我已经决定，与其等到使用其他表格布局重新设计页面，不如等我掌握了足够CSS以便使用更现代的样式表驱动的无表设计方法重新设计页面。由于我对CSS的掌握还不够好，并且由于很大一部分读者继续使用会干扰现代CSS的较旧PC和浏览器，因此我的页面目前仍植根于千年表设计。但是，嘿，它有效，就目前而言，这对于懒惰的老我已经足够了。

Part II of this article will focus on less-used TABLE attributes, many of them introduced in HTML 4.0, and some other fun things to do with tables. See you next time!

本文的第二部分将重点介绍较少使用的TABLE属性，其中许多是在HTML 4.0中引入的，以及与表有关的其他一些有趣的事情。下次见！

翻译自: https://www.sitepoint.com/design-introduction-tables-1/

最新回复(0)