前端表格

一丶表格

①.表格由<table>标签来定义，每个表格都由若干行（都由<tr>标签来定义的），每行被分割为若干单元格，由<td>标签来定义。

   <td>表示table data表格数据，即数据单元格的内容。数据单元格包括文本，图片，列表，段落，表单，水平线，表格等等。

  <table border="1">      //如果不定义边框的话不会有边框，一般情况下要求显示边框。

  <tr>

  <td></td>

  </tr>

  </table>

   1.表格的表头用<th>标签来定义，很多的浏览器会把表头显示为粗体的居中的文本。

   <th>Heading</th>

   <th>Another Heading</th>

   横向的表头：<tr>

               <th>姓名</th>

               <th>电话</th>

               </tr>

   竖向的表头;<tr>

              <th>姓名</th>

              <td>zhou</td>

              </tr>

              <tr>

              <th>电话</th>

              <td>123456</td>

              </tr>

   2.表格中的空单元格    <td>&nbsp;</td>         //在空的单元格中添加一个空位占位符，就可以将边框显示出来。

   

   3.带有标题的表格        <caption>我的标题<caption>

   4.跨行或者跨列的表格单元格   

   横跨两列的单元格：   

               <tr>

               <th>姓名</th>

               <th colspan="2">电话</th>        //colspan表示电话这个占两列单元格

               </tr>

   横跨两行的单元格：

              <tr>

              <th rowspan="2">电话</th>

              <td>123456</td>

              </tr>

              <tr>

              <td>123457</td>

              </tr>

   5.单元格边距      cellpadding=""

   6.单元格间距      cellspacing=""

   7.表格背景颜色和背景图像    <table bgcolor="red"> 

                                  </table>

                                  

                                  <table background="url...">     //图片地址

                                  </table>

                                  如果向表格单元格中添加这些属性的话就把这两个属性写到<td>中。

  8.表格单元中排列内容      <tr>
                              <th align="left">消费项目....</th>
                              <th align="right">一月</th>
                              <th align="right">二月</th>                        //使用 "align" 属性排列单元格内容
                              </tr>