table就是表格。

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。

 

下面,教大家几个英文:

table 表格
tr = table row 表格的行,表格的排。
(注意:横的是行或排,竖的是列。)
th = table header 表格的标题。里面的内容在此元素中是水平居中对齐的。
td = table data 表格的数据,用来定义表格的元素(说通俗点就是单元格)。里面的内容在元素中是水平左对齐的。
那么知道了这几个标签的作用,我们试着写一个表格。一行两列的表格。
 
例1:

这样就形成了一个一行两列的表格。
首先,有个最外框table,里面套着一组tr(行),tr里面再套两个元素td。
这样就形成了一行两列的表格。
下面再举一个例子:
 
例2:
如果是,两行三列,而且第一列是表格标题,那怎么写呢?

这样就好了。
好的,下面再举一个例子。
 
例3:
接着上面的例子,第一列原本有两行,那么合并成一行。

这里的rowspan是row span的组合,意思就是行的跨度。
rowspan=”2″就是跨两行。那么就是向下跨两行了啊。
如果是横着那就是跨列,用colspan。
然后再看看上面的,第二行的第一列的,th已经不见了,原因就是上面的跨了两行,第二行的th就被占位了。所以不写了。
再举例:
 
例4:
三列三行,第一行全部合并。

就这样。
 
讲到这里,表格结构的基本知识已经讲完了。
但是,大家有没有觉得表格复杂的时候代码会不会很乱?
所以,正常做的时候我们是直接使用DW的插入表格功能插入表格并编辑表格的。
至于DW制作表格的方法这里就不讲了。
这里主要讲代码。
 

那么,制作表格的时候关于表格的装饰,样式的设定需要补充一下:
  • 表格的td,tr,th,就是table里面的元素是没有margin这个属性的。就是没有外边距的概念,但是下面的方法可以设置单元格之间的距离。
  • 单元格之间的距离是通过border-spacing来控制的。
    如果给td设置border-spacing:1px,那么两个单元格之间的距离是2px。
    如果是给table设置border-spacing:1px,那么两个单元格之间的距离是1px。
  • 如果单元格border为1px,之间不想要空隙那应该怎么做呢?
    border-spacing:0。
    但是你会发现两个单元格之间边框宽度是2px。
    这个时候我们要合并边框,使用border-collapse属性,border-collapse:collapse,这么设置后,表格的边框都是1px了。
  • 有的时候合并单元格之后,文字默认是居上对齐的。
    如果想水平方向和垂直方向都居中对齐那么应该怎么设置呢?
    使用:vertical-align:middle,垂直方向对齐。
    翻译:verticalalign 垂直对齐,middle 中间的。
    水平方向就是常用的text-align:center就可以了。
  • 至于其它美化方法,做的时候试呗。看你想做成啥样的。

 

HTML5时代的表格

HTML5时代的表格,主要特点就是多平台,多客户端适应。
如果你用多了table表格,你会发现table在很多时候都有局限性。为了解决这个问题,CSS3中出现了很多把普通HTML元素模拟成表格元素的属性。
通过CSS的控制,我们可以让元素适时变成表格元素,适时变成常用HTML元素。
就是使用display属性,设置table相关值。
如下,表格是直接从英文官网摘来的,描述也简单,所以不翻译了。

table Let the element behave like a <table> element
table-caption Let the element behave like a <caption> element
table-column-group Let the element behave like a <colgroup> element
table-header-group Let the element behave like a <thead> element
table-footer-group Let the element behave like a <tfoot> element
table-row-group Let the element behave like a <tbody> element
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element

 
例5:
HTML部分代码:

 
CSS部分代码:

上面个的方法就可以做出一个两行两列的表格。
而且该表格的伸缩性也非常好。可以通过css做出不同的布局和样式。这就是非table表格所具备的优势。
 

注意事项:

需要注意的是,不是说现在就不适合用table了。
table有他的有点,比如复杂表格的排列方面还是很占优势的。但是制作响应式的时候有时就不是很好。
而div+css表格的方式不是说绝对主流。比如,合并单元格这方面就是个劣势了。
所以,他们有各自的优缺点。大家首先需要了解自己的需求,然后再确定用div+css的方式做表格好还是用table做表格好。
至于表格更多的使用技巧,大家可以在日后使用时再自学。

本篇文章相关标签: