【HTML基础】table标签常用的属性和CSS样式

因为不是专业网页设计，所以只在使用的时候才会重新熟悉HTML标签的用法。这次《退税申报表导出word网页版》的制作需要用到<table>标签，就把table的用法和CSS样式做个总结，方便以后复习。

HTML 标签列表（功能排序） | 菜鸟教程

表格
<table>	定义一个表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。

table标签有以下属性

HTML <table> 标签 | 菜鸟教程

border

1 “”【0】

规定表格单元是否拥有边框。 【教程里说是””，但是实际测试应该是0】

table本来的属性有多个，但是HTML5只保留这1个。决定是否拥有边框。

<table border="0">
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
          </table>

<table border="1">
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
          </table>

如果配合CSS样式表，可以丰富展示效果：

CSS样式表之表格（Table） 属性 | 菜鸟教程

属性	说明	CSS
border-collapse	规定是否合并表格边框	2
border-spacing	规定相邻单元格边框之间的距离	2
caption-side	规定表格标题的位置	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	2
table-layout	设置用于表格的布局算法	2

以上仅列举表格的专有样式属性，表格还可以应用border属性（可能还有）。

经过测试，表格的边框css样式，由table，th，td分别控制外圈，表头和单元格的边框。只有全部设置边框，效果才能等于<table border=”1″>（在HTML中设置table元素的border属性等于1）

table,th,td {  
  border: 1px solid black;  
}
上述效果等于
<table border="1">
只是1个是CSS，一个是HTML属性。

如果想显示一个EXCEL表格那样的表格，就是单元格之间没有空白间隙的话，可以设置border-collapse:collapse，代码如下：

table,th,td{
  border: 1px solid black;  
  border-collapse:collapse;
}

经过测试，table的标签属性border值为0时，全无框，等于1，“”，字符都可以有框，等于数字123会随着数字变大，最外的框会变大。这真的是……，而且html属性标签里面的是否开启的值checkbox的value的值只能是true，false或其他任何字符都是不选中。这里却是必须等于0才是无，其他任何字符都是选中。是我知识太差，还是标准有点秀~

---