HTML标记语言——表格与标签

如果我们根据表格标签设计之初的目的好好使用的话,那么答案就肯定是"不!".滥用表格创建复杂嵌套的布局的行为理所当然会遭到谴责,但是表格的确会给资料区块提供它需要的良好的结构. 我们不能在整本书里都叙述创建完美表格所需要的各种技巧,因此就此打住,希望你已经开始知道如何创建简单的又具有可用性的方便CSS修饰的简单表格.
谈到样式,让我们用几种不同的css技巧修饰一下之前的示例.
技巧延伸
与之前章节一样,我们用灵活的语义化的结构化的标记为基础,然后用css给他加上一些样式
首先,我们先来看看简单的边框技巧,在示例上创建单线边框,然后我们再为表格标题和表头加上独特的样式
建立边框
已经对border默认属性的3维效果感到厌倦了么?我也是.一般来说,为table标签加上border="1"就会与图3-1的效果类似,当然你也能换个方法,这边有一个用css做出漂亮整洁边框的诀窍.首先,我们给每个<th><td>单元格两侧(右侧和底部)加上一像素的边框:
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
只加上两侧边框,是建立各处边框等宽又同时让大部分流行的浏览器能够正确显示的关键所在.如果我在四周都加上边框,那么边框的顶部和左侧会在单元格排列时造成重叠,在稍后的示例中,我会给出一种只用一条border规则就达成小童效果的方法.
你会发现图3-2中的整个表格只缺少了最顶部和最左侧的边线,为了补齐边框,我们给<table>元素加上样式相同的border-top和border-left属性
table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

图3-2:为th和td加上两侧边线的表格示例

图3-3 补齐边线后的表格示例

去掉间隙
现在我们已经有了个完整的表格了,但是边框之间的间隔是怎么回事?不幸的是,由于大多数浏览器会默认设置一点外补丁,因此就会露出这些令人讨厌的间隙了.
我们能做的是为表格元素加上border-collapse属性来去掉这些间隙,得到我们想要的样式.
table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;
  }
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
在为border-collapse加上collapse属性后,我们就能看到精确的单线边框样式了,如图3-4

图3-4:使用了border-collapse属性后的表格示例

不支持IE for Mac的版本
除了Internet Explorer for Mac之外,其他的浏览器都支持把CSS简写成这样:
table {
  border-collapse: collapse;
  }
th, td {
  border: 1px solid #999;
  }
要用哪一种方法,这当然由你来决定了,现在仍然有一些人再使用IE for Mac,而使用这个替代方法的话,会让他们看到一些边线的重复,如果你并不在意这件事情,那就使用简化的办法吧.严格来说,这只是个显示上的问题,表格功能丝毫不受影响.
由于我无法弃Mac狂热者于不顾(任何称职的网页设计师都应该这样),因此再往后的示例中,我还是会用IE for Mac也能正确显示的版本.
扩大空间
现在我们手上有了一个完美的表格,不过它看上去有点局促...让我们为手边的th,td规则加上一点内补丁,给它们呼吸的空间(图3-5)
table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

图3-5:加上10像素内补丁的表格示例

你知道吗?如果用单一数值设定内补丁的话(比如之前的例子的10px),就需要给元素的四边都加上相同的设定值,你也可以按照顺时针顺序(上右下左)分别指定每一边的设定值.如果你把内部定设定为10px 5px 2px 10px的话,就会在顶部加上10px的内补丁,右侧加上5px的内补丁,底部加上2px的内补丁,左侧加上10px的内补丁.
另一条捷径:如果上下的设定值相同,左右的设定值也相同的话,你就只需要分别设定一次就可以了,如果设定了padding:10px 5px的话,就会在上下部加上10px的内补丁,在左右侧加上5px的内补丁.

图3-6:顺时针设定内补丁和外边界的顺序

调整表头的显示效果
我们可以轻松的给表头加上背景色，选用不同的字体，让表头更加的明显，由于我们是使用了<th>标签而不是直接在行内将内容设为粗体,因此我们不必加上任何其他的标签,就能直接为表头内容设定样式.
我们在标题下面也加上一点内补丁,同时还用不同的字体,颜色(当然是红色)以突出标题内容(图3-7)
table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  background: #ccc;
  }

图3-7:加上样式的标题和<th>

为表头加上背景图片
刚才我们为表格里的<th>元素加上了灰色背景,但是我们其实可以更进一步,用背景图平铺在格子里来作出漂亮的效果,举例来说,我们能用细致的灰色条纹模拟出许多Mac OS X中的窗口样式
小图片
首先我们用Photoshop(或者其它你熟悉的绘图工具)建立一个小图片,在这个例子中,我们要制作一个2像素灰色和2像素白色交替出现的效果,因此图片只需要4像素高,宽度多款都无所谓,因为它会在<th>里平铺开来,做出我们想要的条纹效果.为了节省带宽,我们只做1像素宽(图3-8)

图3-8:1X4的像素条纹图片(放大后)

CSS
沿用刚才示例中的代码,我们需要修改的地方只有把背景颜色换成刚制作好的小图片路径,除非另外制定,否则根据默认设置,背景图会自动超每个方向平铺.
table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  background: url(th_stripe.gif);
  }
图3 -9是套用这个样式后的表格,表头部分分线了条纹背景,要实验其他的平铺背景图也很方便,你可以试试怎样才能为表头或资料做出最好看的效果,好好享受这个实验的过程吧.

图3-9:在表头使用平铺背景的示例

为ID指定图标

记得本章开始的时候我们为表格里的每一个<th>加上唯一的ID吗?那时我们把这些id与数据列表中的headers属性匹配起来,帮助非可视化浏览器的使用者了解表格的内容,现在我们能在另一个地方发挥这个id的功能了,那就是为每个<th>指定不同的图标.

图标路径会完全记录在CSS文件中,让你能够在网站重构,更新时轻易的替换,完全不必修改标签部分.

图标

我用Photoshop做了三个独特的图标,分别用在示例中每个表头上:Year, Opponent与Season Record(W-L).图3-10就是这三个图标:



图3-10hotoshop制作的三个表头图标

CSS

加上css并不困难,因为我们为每个<th>都制定了独特的id,因此我们能直接用background属性来指定正确的图标.

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  }
#year {
  padding-left: 26px;
  background: #ccc url(icon_year.gif) no-repeat 10px 50%;
  }
#opponent {
  padding-left: 26px;
  background: #ccc url(icon_opp.gif) no-repeat 10px 50%;
  }
#record {
  padding-left: 26px;
  background: #ccc url(icon_rec.gif) no-repeat 10px 50%;
  }


你应该注意到了,我们改用简写方式定义了背景样式,我们从th的定义中取出background:#ccc规则,并把它放到每个表头的图标名称旁边,这会使得我们的图标"坐"在我们指定的灰色背景上面,我们也在每个表头内容的左边留够图标的空间,不让文字覆盖上去,图3-11就是我们想要的效果:



图3-11:为每个<th>制定独特图标的效果

使用简写语法有明显的优点,然而,如果我们只以background属性定义图片,不定义背景色的话,就应该先取消掉先前在<th>中以background定义的背景色.

组合规则,简化内容

能够达到相同功能的另一种写法,是把每个表头里反复出现的规则(在这个例子中是背景图片,内补丁和位置)拿出来写在<th>定义一次就好了(因为它们的设定在每个<th>中的确都一样),然后只在#year,#opponent,#record定义内保留各自不同的设定值(也就是图片路径)

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  padding-left: 26px;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  }
#year {
  background-image: url(icon_year.gif);
  }
#opponent {
  background-image: url(icon_opp.gif);
  }
#record {
  background: url(icon_rec.gif);
  }


这样稍微简洁一些了吧?借着整合相同规则,我们能够省下每次重复定义修改的时间和精力,以这个例子来说,看起来只差六个,半打而已,但是对大一些的样式表来说,节省的量就很可观了.

总结

在本章,我们不仅发现了表格并不邪恶,同时还深入了解表格之后,我们发现,他们很适合用来标记例表数据,而且仍然易于使用

我们更发现,只要加上一些样式,就能控制列表数据的显示方式,让他们变得十分具有吸引力,别再为使用表格而感到恐惧了.