HTML初学者笔记5

表格、布局

1.<table>标签

<table>标签定义出一个 HTML 表格

table标签的属性
align	设置表格的对齐方式	取值left  center  right
bgcolor/background	设置表格的背景颜色/图片
width和height	设置表格的宽和高	单位为px/%
border	设置表格边框的厚度	px
cellspacing	间距:单元格与单元格间的距离	px/%
cellpadding	边距:单元格内元素与边框的距离	px/%

2.表格中的其他元素

表格中的元素
thead	定义一个表头	使用该标签后应与tbody和tfoot连用
	align	可设置表头内容对齐方式left  right  center
tbody	定义表格主体内容
tfoot	定义表格的页脚（脚注或表注）
tr	定义表格的行
th	表头单元格 - 包含表头信息
td	标准单元格 - 包含数据

 <table border="1" width="500" height="400">
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>
      
        <tfoot>
          <tr>
            <td>Sum</td>
            <td>$180</td>
          </tr>
        </tfoot>
      
        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
        </tbody>
      </table>

3.表格的镶嵌

<table border="1" width="300px">
        <tr>
          <td>&nbsp;</td>
          <td> 
            <table border="1" width="100px" align="center"> 
              <tr> 
                <td>&nbsp;</td>
                <td>&nbsp;</td> 
              </tr> 
            </table> 
          </td> 
        </tr> 
      </table>

  4.表格的合并

合并表格
rowspan	在表格插入垂直反向合并的表格取值为想要合并的单元格数
colspan	在表格插入水平方向合并的表格取值为需要合并的单元格数

<table border="1" width="500" height="300" align="center" cellspacing="5" cellpadding="5">
     <tr>
        <td rowspan="3">&nbsp;</td>
        <td colspan="3">&nbsp;</td>
     </tr>
     <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
     </tr>
     <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
     </tr>
</table>