乐趣区

关于前端:HTML表格标签

表格组成:

  • table 表格容器 (外框)
  • <caption>:定义表格的题目;
  • <th></th> :定义一个表格头;
  • <tr></tr>:定义一个表格行;
  • <td></td>:定义一个单元格;

标签属性:

1)table(表) 罕用属性:

  • border:边框粗细
  • height:高度
  • width:宽度
  • bgcolor:背景色彩
  • background:背景图片
  • cellspacing:单元格到单元格之间的间隔
  • cellpadding:单元格内容到单元格之间的间隔
  • align:表格在网页摆放地位

值:
left:左对齐
right:右对齐
center:居中对齐

<table border="值" height="值" width="值" cellspacing="值" cellpadding="值" align="值" >
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

2)tr(一行) 属性

  • align:这一行单元格内容程度摆放形式;

值:
left:左对齐
right:右对齐
center:居中对齐

  • valign:这一行单元格内容垂直摆放形式;

值:
left:左对齐
right:右对齐
center:居中对齐

<tr align="值" valign="值" >
      <!-- 高宽与 table 的属性统一 -->
</tr>

3)td(单元格) 属性

  • align:这一行单元格内容程度摆放形式;

值:
left:左对齐
right:右对齐
center:居中对齐

  • valign:这一行单元格内容垂直摆放形式;

值:
left:左对齐
right:右对齐
center:居中对齐

<td align="值" valign="值">

</td>

单元格合并:

属性:

  • colspan 指明这一个单元格横向占据几个单元格宽度 默认为 1
  • rowspan 指明这一个单元格纵向占据几个单元格高度 默认为 1

例:

<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">1</td>  
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
退出移动版