如何使内容首先呈现在一个多列的表格布局中

如果您的网站使用表格布局，如创建一个两列或三列效果，最左边的列是一个像thesitewizard.com的导航侧栏，在您的网页的HTML代码会先来为您导航侧栏。这是因为表的编码，这样，第一列的第一，其次是第二列，等等。一些站长不喜欢这样的安排，宁愿在他们的网页上，其真正的内容是第一位的。本文讨论如何可以实现这一目标，同时还使用表格布局。

注：如果您使用的是层叠样式表（CSS）为您的网站的布局，本文并不适用于您。让你的内容首先出现使用CSS，你可以很容易地编写你的布局，仍然定位在页面上的任何地方，而无需使用任何的编码技巧。

假设
本文假设你已经知道如何创建一个网站，无论是直接在HTML和CSS，或使用网页编辑器，像Dreamweaver Nvu的或KompoZer帮助。如果这是不正确的，请参阅初学者的AZ启动/创建自己的网站，而不是。

为什么首先在Web页上呈现内容？
这里有几个原因，一些网页设计师喜欢先在网页上展示他们的内容：

1.Accessibility
先在网页上呈现内容的最重要的原因是，它使您的网站更方便盲人游客依靠屏幕阅读器“查看”您的网站的内容。

这很容易短视用户跳过左侧立柱直到您的内容，您的网站和变焦。看一眼你的页面，告诉他们真实的信息可以发现，他们立即往那里集中。不幸的是，那些依靠屏幕阅读器无法做到这一点。该软件朗读一切发现在页面上出现的顺序。如果你的导航菜单首先出现在页面上，您的访客将有听节目菜单上，阅读每一行之前，他/她到达的内容。这是一个非常痛苦的和耗时的过程，我敢肯定，你可以想像。

作为一个结果，谁知道是无障碍的网站管理员尝试建立网站，这类用户更友好的页面上首先把他们的内容。

2.Search发动机（可能已过时的原因）
昔日，搜索引擎是不是先进的，因为他们是今天。在那些古老的天您的网站在搜索引擎结果中显示的文本片段，有时你的网站从最初的几行。其结果是，一些网站管理员希望确保的前几行包含实际内容，而不是他们的菜单栏。如今，搜索引擎是更聪明，并试图抓住从页面的相关条款，并围绕这一术语，而不是显示的内容。通过设置您的网站的meta描述标签，您也可以在一定程度上控制片段。

在过去，一些搜索引擎也比你的页面更高的意义正在显示在您的网页的顶部发生了。据说文本。我怀疑，这就是今天的情况，虽然没有雇员在任何搜索引擎，我不能肯定。

如何使内容首先出现在页面上，当它在第二列
如果您正在为您的网站使用表格布局，并希望首先将这些内容，您不必重新设计你的网站，把你的导航侧栏右侧。相反，你可以使用一个简单的HTML技巧，做到这一点。

由于本教程适合两个人善于HTML编码，以及使用所见即所得的网页编辑器，如Dreamweaver中，Nvu的，KompoZer帮助，我将提供信息，这些情况在下面单独的章节。你不必读取所有三个部分。只要跳到相关的部分。

•对于那些直接在HTML编码
•对于那些使用Dreamweaver
•对于那些使用Nvu的或KompoZer帮助
请注意，这篇文章的目的，我会假设你的网站有类似的东西，其中最左边的列有一个导航菜单，位于第二列和主要内容thesitewizard.com的布局。如果你的网站已经有你的主要内容，在最左边的列，你不读这篇文章，因为，正常情况下，表中的布局，你的内容就已经先来。

使用HTML内容首先在多列的表格布局
2列使用表格布局的网站通常具有类似下面的HTML框架：

<表格边框=“0”CELLSPACING的=“0”WIDTH =“100％”
  摘要=“布局”>
<TR>
  <td width="20%">侧面板</ TD>
  <TD>内容</ TD>
</ TR>
</ TABLE>
如果你有3列，那么你将有一个额外的<td> </ TD>块。在所有情况下，你只能有一个行或文章</ TR>标签对。

为了使你的内容是第一位的，改变你的布局，使得它看起来像这样：

<表格边框=“0”=“0”cellpadding的CELLSPACING =“0”
  宽度=“100％”摘要“布局”>
<TR>
  <TD> </ TD>
  <td rowspan="2" valign="top">内容</ TD>
</ TR>
<TR>
  <td width="20%" valign="top">侧板</ TD>
</ TR>
</ TABLE>
请注意，在最上面一排，第一<TD> </ TD>对是空的，但你的内容像往常一样进入第二个单元格。第二单元也有ROWSPAN的的属性，以便它占据了整个垂直列。侧面板被放置在第二行中的单元格。此外，我已经设置了单元格之间的间距，在每个单元中，以0填充。

这样做的效果是，视觉上来说，页面将显示你原来的几乎相同，除了你的内容首先出现在源。

但是也有副作用。第一个副作用是，除非你采取特别措施，有您的文字和细胞边缘，也没有任何两列之间的空间之间没有空格。这是因为，如前所述，将cellspacing和cellpadding这个属性已被被设置为零。由于这是很少可取的，你有两个解决方案，所有这些都有自己的副作用：

确定公司运作的一个非零的值要么的CELLSPACING或CELLPADDING的或两者。这会给你的两列之间的某种形式的保证金。

不过，这取决于你设置多么大的价值，如果你仔细审视你的网页，你会发现现在的话，你的第一列的顶部边缘低于你的第二个专栏，自空单元格中第一行现在将占据更多的空间。这可能会或可能不会是一个问题，根据您的网站的设计灵敏度对齐问题。如果它是一个问题，你可以到你的第二列的顶部插入空格补偿，使两列中的文本的顶部边​​缘对齐。通过使用CSS，插入 - 标签，或插入您需要的高度透明的图像，这是可以做到。

2，采用CSS样式出现在两列的一切，离开利润的白色空间。

如果你不真正知道的CSS，并在阅读这部分纯粹出于好奇，用第一种方法，并插入无论是 - 标签或透明图像对齐列。

顺便说一下，如果你已经知道如何使用CSS样式您的网页，并有没有具体的原因，为什么你需要使用一个表奠定了您的网站，可以考虑使用样式来创建的，而不是表的多个列。使用CSS，你可以在页面上的任何位置上放置任何文本块与有罪不罚现象，并通过简单的修改你的CSS文件，就突发奇想，你可以改变你的整个网站的外观。

内容首先使用Dreamweaver在多列的表格布局
对于这一招，你将需要使用Dreamweaver创建一个表2行。我将假定您正在创建一个2列的网站在这里我举的例子，但该方法也可用于创建3列。

1。选择“插入|表格”菜单。也就是说，单击“插入”菜单，然后由“表”项。

2，进入“2”（不带引号）到“行”和“列”字段。

3.Since使用表格布局（而不是正常的数据），更改其默认的表格宽度为200像素到100％，所以，它占据了整个屏幕宽度。

4.Change“边框粗细”为“0”（即零，不带引号）。

5。输入“0”（即零，不带引号），进入“单元格间距”字段。输入“8”或其他一些进入“单元格边距”字段。您还可以输入零（“0”）在这里很好，如果你愿意，但如果这样做，就会有第一和第二列之间的文本没有保证金或白色的空间。

6.In“摘要”字段中，输入“布局”。这会不会被显示，但有辅助功能的原因。

7。按“确定”按钮时，即可大功告成。

8.A表将出现在屏幕上。该表将有它的边界，信号，实际上是无形的边界虚线。将鼠标移到第二列中的顶部单元，向下拖动，选择在该列中的单元格。即，选择在第二列中的顶部和底部的细胞。我们将要合并他们，使他们成为一个竖长的细胞。

即使让你正确选择两个小区，你会看到的第二栏，里面有你的内容，现在有固体边界，暗示他们已选定。选择“修改|表格|合并单元格”菜单。的第二列现在将跨越两行的单个单元格。

10。单击在较低的第一列中的单元格的某个地方。在Dreamweaver窗口的底部，在“属性”面板中，你应该能够发现“垂直”与“默认”一词在它的下拉框。单击向下箭头，在下拉框中选择“顶”。

11.While仍然在同一个细胞，为“W”，它旁边的空白栏。设置列宽。通常您会想要固定边柱的大小，所以它不会太宽。输入“20％”（不带引号），或一些其他的空白栏处设置该列的宽度的百分比值。如果你想列固定的（发言权）200像素的宽度，只要输入“200”（再次说明，没有引号）到该空间。

12。单击在第二列中的某个地方。同样，在“属性”面板中，选择“垂直”对齐的“顶”。

要使用表为您的网站，输入您的内容，第二列，但在第二行中的第一列单元格中创建您的侧边栏。再次重新读取前面的句子 - 这是很重要的。不要将任何东西在顶行的第一列。

填充两列，你会发现，出现顶电池尺寸的缩小。它不会完全消失，因为你给了它一个单元格填充为“8”，这意味着它会占用至少有几个像素的垂直空间的确切数额似乎依赖于浏览器。

为了使你的两列的顶部行对齐，你可能会需要添加一些空白的第二列的顶部。请注意，它是不是可以准确地判断你的网站真的会出现在Dreamweaver - 你在这里看到的并不一定是你在Web浏览器。事实上，不同的网页浏览器都呈现这个空的空间与不同的高度。我认为，你的工作，定期检查页面是如何呈现在各大浏览器。如果你已经设定了正确的Dreamweaver中，你可以使用“文件”|“在浏览器中预览”菜单目前已安装在您的系统上的浏览器访问。

脚注：Dreamweaver中很容易让您使用CSS创建网站。除非你有特殊原因，你可能要考虑使用CSS奠定了你的网站，而不是表。

多列的表格布局中的内容首先使用Nvu的/ KompoZer帮助
为了使您的内容你身边前面板在Nvu的或KompoZer帮助，创建一个表，而不是通常的1行2列2行2列。本教程的目的，我假设您正在创建一个2列布局为您的网站，在第二列中的内容。

1。选择“表| |表插入”菜单。也就是说，单击“表”菜单，然后在出现的菜单中的“插入”项，然后单击“表”项，弹出的新菜单。

2，单击“正是”选项卡，在出现的对话框中。

如果它已经不存在，既有“行”和“列”输入“2”（不带引号）。

4。输入“100”（再次说明，没有引号），宽领域，并从下拉框中选择“窗口”％（除非这些领域已经包含正确的值）。

5。输入“0”（零，不带引号）到边境字段。

6。单击“单元格”选项卡。 “垂直对齐方式”下拉框中选择“顶”。

7。请输入“0”（零，没有引号）进入该领域为“CELLSPACING”。

8.Enter“8”（不含引号）进入该领域为“CELLPADDING”的。您也可以输入任何其他的号码。请注意，如果你把这里的零（“0”），将在第一和第二列之间的文本没有保证金或白色的空间。

9。按“OK”。

10.Put你的鼠标光标移到第二列中的顶部单元，并拖累同一列中的单元格的底部。这应该在该列中选择两个单元。点击“表|注册选定的单元格”。

单击第一列中的单元格。点击“表表格属性”。在出现的对话框中，单击“单元格”选项卡。

12。单击“宽”字旁的复选框，并输入20到旁边的字段。从旁边的下拉框中选择“表”％。侧面板的宽度设置表格的宽度的20％。如果你想你的侧面板上有一些其他的宽度，甚至像一个固定的宽度200像素，你可以在这里输入自己的值。点击“确定”。

正如你可能已经知道，你的内容将予订立的第二列。然而，侧面板，你应该创建它的第一列的第二行中的单元格中。再次重新读前一句 - 这是整点的运动。不要将任何东西在顶行的第一列。

虽然左上方列单元格为空，它仍然会占据一定的空间，特别是因为你给了它一个“8”单元格填充（空间的确切数额，根据不同的网页浏览器）。要对齐的顶部行两列，你将需要添加一些空白的第二列的顶部。需要注意的是，你不能依赖在Nvu的或KompoZer帮助告诉你多少空间来添加，甚至没有在“预览”模式。相反，你应该保存该页面并打开一个网页浏览器，看看你是否已经加入太少或太多的空间。在不止一个浏览器试试吧，因为不同的浏览器显示不同的事情。

结论
本指南中的HTML技巧将让您出示您的内容上多列网页，同时还使用表格布局，从而提高你的网页无障碍。

高端网站建设