7

HTML表格标签

 3 years ago
source link: https://segmentfault.com/a/1190000038753473
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

HTML表格标签

发布于 11 分钟前

表格组成:

  • 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>

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK