网页设计:HTML表格标签

作者 : 开心源码 本文共995个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共207人阅读

表格组成:

  • 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>
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 网页设计:HTML表格标签

发表回复