表格

关于表格

表格的组成结构:

table:整体表格框架
tr:单元行
td(th):单元格
table包含tr,tr包含td
表格

合并单元格

合并的本质: 不是侵占,而是给自身添加位置

  • rowspan: 垂直合并,又称跨行合并;自身在本列中多占一个位置
  • clospan: 水平合并,又称跨列合并;自身在本行中多占一个位置
table的属性

<table
width=“80px” height="120px"
border=“1px” border color="#D3D3D3"
align=“center” valign="middle"
cellpadding=“1px” cellspacing=“0px”>
</table>

  • width : 表格的宽度
  • height : 表格的高度
  • border : 表格的边框属性
  • border color : 表格边框的颜色属性
  • align : 表格的整体水平文字布局 属性值可以是center,left,right
  • valign : 表格的整体垂直文字布局 属性值可以是top,middle,bottom
  • cellpadding : 内框宽度值
  • cellspacing : 文字与边框的距离
    表格
tr的属性

<tr
width=“120px” height="40px"
background =" "
bgcolor ="red"
valign=“middle”>
</tr>

  • width : 单元行的宽度
  • height : 单元行的高度
  • bgcolor : 背景颜色
  • background : 背景属性可以设置图片或颜色
  • align : 单元行的水平文字布局
  • valign : 单元行的垂直文字布局
td的属性

<td
width=“60px” height="40px"
background =" "
bgcolor ="yellow"
valign=“middle”>
</td>

使用时参照tr(单元行)的属性即可

表格练习1

表格

表格练习2

表格

表格练习3

表格