表格基础

<table>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

一、

表格:table

行:table row

列:table data

4*4表格 table>tr*4>td*4(按Tab键)

二、

table属性:borede 1px 设置表格边框

                width:300px  height:300px(如果设置的宽高小于表格的内容,宽高按表格内容走;如果设置的宽高大于表格的内容,宽高按设置的大小走。)

                水平居中align:left;center;right;

                背景颜色bgcolor:pink;

                边框颜色bordercolor:blue;

                内边距cellpadding:10px;

                外边距cellspacing:20px;

 tr属性:align:left;center;right; 当前行文本水平对齐

            valign:top;middle;bottom;当前行文本垂直对齐

 td属性:width:会影响整个表格的列

            height:会影响整个表格的行

            align:left;center;right; 设置当前列对齐方式

            valign:top;middle;bottom;设置当前行对齐方式

            bgcolor:设置当前单元格的背景颜色(自己个儿的背景色)

三、

不规则的表格使用

colspan跨列——当一个4*4的表格,你想把第一行的第1列和第2列合并;

                 语法<table><tr>

                           <td colspan=“2”></td>

                           <td></td>

                           <td></td>

                           

                      </tr>

 

rowspan跨行——当一个4*4的表格,你想把第四列的第2行和第3行和第4行合并;                 

                       <tr>

                           <td></td>

                           <td></td>

                           <td></td>

                           <td rowspan=“3”></td>

                      </tr>

 

 

                       <tr>

                           <td></td>

                           <td></td>

                           <td></td>

                          

                      </tr>

 

 

                          

                       <tr>

                           <td></td>

                           <td></td>

                           <td></td>

                      

                      </tr>

              </table>

四、

行/列的标题th

将td换成th(内容文字加粗,并居中)

五、

表格标题

<caption></caption>如要设置表格标题,需紧跟在<table></table>后面,中间不能隔东西;

六、

行分组(可分区域管理类似页头、页中、页尾)

表头行<thead></thead>

表主体<tbody></tbody>

表尾行<tfoot></tfoot>

七、

取色器写法——<span style="color:red">取色器</span> ——在浏览器中按F12-style-Add backgroundcolor-即可拾色;

 

posted on 2019-09-29 13:52  咳咳1122  阅读(101)  评论(0编辑  收藏  举报

导航