进一步认识table
发表评论»基础的东西在这里,就不重复了~
<caption>
<catpiton>用于定义一个表格的标题,书写时候需紧随<table>标签之后。可通过样式属性:caption-side:left 设置标题在表格中所处的位置。但是目前仅非IE浏览器支持该样式属性,而IE浏览器中可通过标签的align属性完成(IE6,IE7仅支持top,bottom)。同时<caption>标签无法继承其上级table的某些样式属性(如backgroud,border等)。同时FF对caption的出来还表现出一些异常,如当对其上级<table>设置外边距时,<caption>并不会随上级<table>流动~查看演示
<colgroup>,<col>
<colgroup>用于对表格中的列进行分组。如:我们将表格中的第一列设置为红字白底。
查看演示我们可以看到不同浏览器对该标签的支持都不尽相同,safari对该标签的支持相当苛刻,需将该标签紧随<caption>/<table>书写。同时在非IE浏览器中该标签的书写位置不会影响到<thead>中单元格的显示属性,<thead>中的列亦可应用设置。而IE中只有位于<colgroup>之后的表格对象方可应用此标签设置,同时部分浏览器对通过该标签进行的样式设置无效,经测试,目前仅IE支持最好。查看演示
<col>为表格中一个或多个列定义属性值,只能在colgroup中使用此元素。如:将表格中的第一列设置为红字白底,第二,第三列设置为黑底白字。查看演示
<col>的span属性定义其影响的列数~
表格边框
表格的默认边框是很丑陋的,一个最为关键的问题是相邻单元格的重复边框,所以我们不得不动手对其进行美化。
方法一:取消默认的表格,单元格设置,将单元格间距设置为指定宽度,为表格设置背景色进而实现无重复边框。查看演示
方法二:更为简单有效的方法是通过设置border-collapes。查看演示
暂时还没有评论