1、常用表格标签

普通

   <table> 

         |           <tr>

         |           |          <th></th>

         |           |          <td></td>

         |            </tr>

         </table>

常用

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

tr :元素定义表格行，

th :元素定义表头,大多数浏览器会把表头显示为粗体居中的文本，

td: 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

 caption:定义表格的标题。标签必须直接放置到 <table> 标签之后。只能对每个表格定义一个标题。

所有主流浏览器都支持 <caption> 标签。默认居中可通过 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

  colgroup：对表格中的列进行组合，可以向整个列应用样式。只能在 <table> 元素之内， <caption> 元素之后，任意元素之前使用 。

所有主流浏览器都支持 <colgroup> 标签。如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

<colgroup  span="2" style="background-color:red">     </colgroup>     --两列变为红色

 span  规定列组应该横跨的列数。

 col： 标签为表格中一个或多个列定义属性值。<col> 没有结束标签。只能在 table 或 colgroup 元素中使用 <col> 标签。

2、属性

3、边框 

           border属性 规定表格边框的宽度。               

                                  <table border="1">  </table>     边框为1px

 border-collapse：   属性设置表格的边框是否被合并为一个单一的边框

如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

 制作一个各边都为1px的边框 

1.                     <table border="1">  </table>          |

                             table{border-collapse:collapse}     |      -- --所有边框都为1px 的表格

2、                table    的CSS为  {  border-collapse:collapse;  border:none;  }

td         的CSS为  {  border:solid #000 1px;  }

4、关于html中table表格tr,td的高度和宽度

        word-break:break-all;   //字符串自动换行

table-layout

所有主流浏览器都支持table-layout属性。

                                              注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

要想固定table的总的宽度和每列的宽度：

  <table  id="Table1" style="table-layout:fixed"  border="1" >

  word-break

指定非CJK脚本的断行规则 (CJK脚本是中国，日本和韩国（"中日韩"）脚本)。

注意：
            1、(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
                                <tr>
                                         <td width="25%" style="word-break : break-all; ">

abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

2、（Firefox浏览器）不能解决连续的英文字符和阿拉伯数字的断行, ,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
               (Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，

使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">

<tr>
                             <td width="25%" style="word-break : break-all; overflow:hidden; ">

abcdefghigklmnopqrstuvwxyz1234567890

</td>

</tr>

</table>

1、设置table中的单元格内容自动换行，为了满足浏览器兼容性，需要在table中设置table-layout:fixed。

2、word-wrap在div属性中能起到换行的作用，也可以在td中使用div,在div里面设置。

<style type="text/css">
        table{border:1px red solid;height:300px; border-collapse: collapse;}
        table tr td{border:1px red solid;}
    </style>

<table width="600px" style="table-layout:fixed;word-wrap:break-word;" >
    <tr style="">
        <td style="width:120px;">全是中文有标点</td>
        <td style="width:120px;">全是中文无标点</td>
        <td style="width:120px;">全是英文有标点</td>
        <td style="width:120px;">中文和英文</td>
        <td style="width:120px;">全是英文无标点</td>
    </tr>
    <tr >  
        <td style="width:120px;">你好这是中文。你好这是中文。你好这是中文。你好这是中文。</td>
        <td style="width:120px;">你好这是中文你好这是中文你好这是中文你好这是中文</td>
        <td style="width:120px;">This is all English. This is all English. This is all English.</td>  
        <td style="width:120px;">中英文混排的情况。Chinese and English.中英文混排的情况。Chinese and English.</td>  
        <td style="width:120px;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>  
    </tr>  
  </table>
  <br>
  <div style="word-wrap:break-word;width:200px;border:1px red solid;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
  <br>
  <div style="word-wrap:break-word;width:200px;border:1px #00FF33 solid;">中文中文中文中文中文中文中文中文中文中文中文</div

6、合并单元格

colspan    单元格横向跨越

当页面太长，打印的时候，要求每页上都要有表头，结尾，

表头： 定义其thead，并对其样式设置成：style="display:table-header-group"。

结尾：定义其tfoot，并对style="display:table-footer-group"

<TABLE border="0" style="font-size:9pt;" width="300px" align="center">

<THEAD style="display:table-header-group;font-weight:bold">

<TR>

<TD >每页都有的表头 </TD>

</TR>
         </THEAD>

<TBODY style="text-align:center"">
　　　　<TR>

　　　　　　<TD>表格内容</TD>

　　　　</TR>
　　 </TBODY>

　　<TFOOT style="display:table-footer-group;font-weight:bold">
　　　　<TR>

　　　　　　<TD >每页都有的表尾</TD>

　　　　</TR>

　　</TFOOT>

</TABLE>

<input type=button value=" 打 印 " onclick=JavaScript:window.print()>

 8、表格嵌套 

<td   style="padding:0px;height:31px;">

　　<table border="1" frame="void">
　　　　<tr>
　　　　　　<td><span>生产人员工资</span></td>
　　　　</tr>
　　</table>

</td>

frame="void"     -- 表格边框重合  ( 在边框用  border="1" 表示的情况下 )

给外侧 <td>  一个基础高度，<table> 中的高 宽都是 100%。  --边框线沾满单元格不会出现空白

属性 cellspacing  在这里不好用  ，可以设置外侧 <td> 的 样式  padding=0 去除边框线之间的空间