美文网首页
HTML表格

HTML表格

作者: 没头脑很不高兴 | 来源:发表于2017-10-25 22:16 被阅读0次

1.我们先用一些简单的标签画一个表格

  1. 怎么画:<table>标签可以定义一个表格,如下是用<table>标签和它的一些子元素画出来的一张简单的表
    代码如下：
  <caption>第一个表格</caption>
  <thead>
    <tr>
      <th>第一个表格是这样的</th>
      <th>第一个表格是这样的</th>
      <th>第一个表格是这样的</th>
    </tr>
  </thead>
    <tfoot>
  <tr>
    <td>foot</td>
    <td>foot</td>
    <td>foot</td>
  </tr> 
  </tfoot>
  <tbody>
  <tr>
    <td>1,1</td>
    <td>1,2</td>
    <td>1,3</td>
  </tr>
  <tr>
    <td>21</td>
    <td>2,2</td>
    <td>2,3</td>
  </tr> 
  </tbody>

对应的效果是这样的

image.png

2.表格的组成结构

  • 表格可以说由四部分组成：caption、thead、tbody和tfoot
    其中 caption表示表格的标题，会显示在表格的正上方并且居中。thead是表格的第一行元素、就是表头，注意与caption区分开。tbody是表格的“身体”，这个标签语义化很明显，但是解释起来有点儿奇怪。。。tfoot就是表格最后一行的元素，不管tfoot标签是不是放在整个table标签的后面的，它的内容始终都会显示在表格的最后一行
  • <td>表示单元格中的数据，是tbody内的标签。<th>表示单元格中的第一行或第一列，是thead内的标签，显示出来的效果是加粗。但是二者混用浏览器是不会摆错的，只是按照它们的样式特性来显示效果。

2.表格内的一些装饰效果

  1. 表格默认的边框是两条线的，一般我们习惯的Excel表格时都是一条边框线，在css给table一个这样的样式:table{ border-collapse:collapse } 会使它的边框变成一条线
image.png

这样就比较像我们经常看到的表

  1. 合并单元格
    把单独的<td>标签改成这样的标签<td colspan="3">数字需要合并单元格的数量。但是在MDN上并没有相关的解释，可能是不太符合规范，但是浏览器认识这个。
image.png

如图把tfoot里面的三个单元格合并了。
3.colgroup标签
使用时，用如下的代码可以实现一些简单的效果，但是比较有限，想要更多的效果还是要去css中设置样式

  <colgroup>
     <col width=200 bgcolor=yellow>
    <col width=300 bgcolor=#eee>
    <col width=200>
 </colgroup>

效果如下：

image.png

但是bgcolor这些标签已经废弃了，而且其他的标签又不能用，相当于在这个标签中只能实现设置宽高。

3.table定位

观察上面的表格，如果去掉边框，表格内的数据位置还是不变的。于是，这个特性可以拿来做定位效果。但是这个方法被诟病太多，现在几乎都不用了，先写到这里，等以后有机会再来补充table定位的方法。

相关文章