HTML-Table与Div的简单汇总

            页面的布局，如今大部分的情况下都要运用到Div+Css的布局样式，但是追溯以前，用的比较多的却是Table这个标签。

        首先，我们先来比较一下Table与Div的区别。

    Table:

        优点：浏览器兼容性能好；

        缺点：布局代码比较多，tr/td的频繁使用，导致写代码的人容易犯懵；

                  布局存在局限性，修改困难；

                  后期代码的维护性能极差。

     Div:

         优点：代码少，布局代码少，而且简单易懂，页面美观；

                   由于代码少，使得后期的维护变得比较简单；

                   代码可单独写在CSS文件里，修改起来方便；

         缺点：浏览器兼容性能不好。

            Table标签的相关项：

     tr/td

               tr:表示横向的格子

               td:表示纵向的格子

例如：<table>

                <tr>

                    <td></td>

                    <td></td>

                </tr>

                <tr>

                    <td></td>

                    <td></td>

                 </tr>

          </table>

以上的代码表示 两行两列的表格 另外可设置其边框属性 border

        

               重点掌握：

      跨行消除边框 rowspan

      跨列消除边框 colspan

                     Div标签的相关项

  id属性：唯一，不可重复

  class属性：不唯一，当多个标签的设置样式差不多的时候，应该选择使用class标签

   div 可以嵌套多个div使用

     例如： <div>

                    <div>

                    </div>

                    <div>

                    </div> 

                </div>

      div可用border属性，设置其边框的大小以及样式

                    style="border:1px solid #EEE;"

        设置了div的边框为1像素大小的实线，颜色为#EEE。