Html 表格使用

一、基本使用：

1.表的构造：

table

          caption标题

          colgroup(width）列组：定义列样式，class或style，注意span不会合并单元格，只代表跨多少列样式

          col(width)列：定义列样式，非闭合标签

          thead表眉：默认垂直居中加粗样式

                tr-td(colspan rowspan)tr为表行table row，td为单元格table data，colspan合并列单元格，rowspan合并行单元格

          tbody表主体：可以有多个

                tr-td(colspan rowspan)

          tfoot表尾

                tr-td(colspan rowspan)

2.布局：

合并单元格：

colspan ：合并列，使用<tr><td colspan="2"></td></tr>

rowspan：合并行，使用<tr><td rowspan="2"></td></tr>

单元格数据居中：

<tr style="text-align=center;"></tr>

3.基本方法：

增加：

var tb = document.getElementById("tb");
 function addRow(col1,col2,col3){

          //获取表最后一行，插入单元格
           var row = tb.insertRow(tb.FetchRowCount);
           row.insertCell(0).innerHTML = col1;
           row.insertCell(1).innerHTML = col2;
           row.insertCell(2).innerHTML = col3; 
 }

删除：

//删除最后一行

tb.deleteRow(tb.rows.length-1)

修改：

//修改第3行第一个单元格数据

b.rows[2].cells[0].innerHTML = "2021-3-23";

二、遇到的问题：

1.表标题不居中？

caption标签的使用要放在table标签下面，才能有效。

2.colgroup和col标签的align="center"，没有对表里单元格的内容居中？

colgroup和col处理的是列样式，单元格td的父容器是tr，设置tr的style="text-align=center;"。

3.deleteRow()函数没能从表最下行开始删除？

var tb = getElementById('XXX');

function delete(){

       deleteRow(tb.rows.length-1)

}

4.表格插入行数据，单元格的数据没有居中？

使用了innerHTML，不过里面的样式没有起作用，后期更新。

5.单元格数据更新？

第二行第一列单元格

tb.rows[1].cel