HTML之Table表单的属性以及用法

一、表格的常用属性

 （1）table的常用属性

  1.width、height  定义表格的长和宽

  2.align   是整个表格相对于父元素的对齐方式

  3.border   整个表格外围的的边界宽度

  4.cellspacing   单元格外边距，即单元格之间的间距   默认不为0

  5.cellpadding   单元格内边距，即单元格中的内容与边界的距离

  6.bgcolor   背景颜色

 （2）tr标签的常用属性

   1.align   该行的内容，水平对齐方式

   2.valign   改行的内容，垂直对齐方式

   3.bgcolor  每行的背景颜色

 （3）td标签的常用属性

   1.width

   2.height

   3.align

   4.valign

   5.bgcolor

   6.colspan   合并水平单元格

   7.rowspan   合并垂直单元格

（4）th标签  该标签的作用和td差不多，不同的是该标签中的内容是列的标题

（5）caption标签   该标签的作用就是给表格设置题目  直接使用<caption>标题名称</caption> 

（6）thead标签  表头

（7）tbody  表主题

（8）tfoot  表尾

ps：可以将表格整体分为三部分thead、tbody、tfoot，如果使用时不加以使用，则默认表格内容都在tbody该部分中

二、使用--------至多一个菜谱

 <table align="center" width=400px cellspacing=0 cellpadding=3 border=1 height=180px>
 <tr align="center"><td colspan=3>星期一菜谱</td></tr>
 <tr align="center"><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒土豆</td></tr>
         <tr align="center"><td>小葱豆腐</td><td>炒白菜</td></tr>
 <tr align="center"><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>油焖大虾</td></tr>
<tr align="center"><td>海参鲍鱼</td><td>宫保鸡丁</td></tr>
</table>

  说明：

     table标签里面的属性：创建一个高为180，宽为400，边界线大小为1，表内单元格间的间距为0，单元格和单元格内部的内容的间距为3的一个表格，并且表格相对于父元素居中对齐

     tr标签的属性：每行数据内容都居中对齐

     td标签的属性：colspan=3该属性可以使得该单元格占用原来水平三个单元格的大小位置，rowspan=2该属性可以使得该单元格占用原来垂直单元格俩个位置大小

效果图：

     

ps：1.如果不设置是表格整个的高度，，那每行数据上下之间显得挤压，因为不设置就是自适应，只要把内容正好显示出来，当然要想改变行高也不止改变表格高度这个唯一方法，还有很多方法，只是在则例说一下自适应的问题