美文网首页
07.HTML-表格

07.HTML-表格

作者: Lv_0 | 来源:发表于2017-04-13 23:18 被阅读0次
  1. 07.HTML-表格
  2. html5表格标签
  3. 表格
  4. 2019-01-09第三天
  5. 2015年11月5日
  6. 2018-11-28
  7. 第5单元 个性月历
  8. 零基础Web前端开发（5）
  9. html基础
  10. HTML基础

    • 表格

    table th1 th2
    tr1 td td
    tr2 td td
    tr3 td td
    • 标签释义
      ◑ <table>标签标识定义一个table
      ◑ <th>标签定义其表头
      ◑ <tr>标签定义其一行
      ◑ <td>标签定义其单元格内容
    属性 释义
    border 显示边框的线宽,不定义即无边框
    width 定义其宽
    height 定义其高
    colspan 通过定义占几列,可横向实现合并单元格
    rowspan 通过定义占几列,可纵向实现合并单元格
    cellpading 单元格和内容间距
    cellspacing 单元格之间间距
    align 设置对齐方式
    frame 属性可设置其单元格边框线的显示方式
    • 补充
      ◑ 单元格内容为空<td><td>,常在中间加占位符<td> <td>
      ◑ 通过不同的设置方式,可实现表头水平显示即垂直显示
      ◑ <caption>元素可定义表格标题
      ◑ 表格内的标签可以是其他各种标签,以实现各种嵌套
      ◑ 表格和单元格通过属性bgcolor/background填充其背景颜色/图片
      ◑ <thead>,<tfoot>,<tbody>可设置其页眉,页脚,主体,且必须按照此顺序设置
      ◑ <col />,<colgroup />和其他属性结合,可对其列进行操作
    ◆示例代码如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="2" cellpadding="10" bgcolor="royalblue">
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td> </td>
            </tr>
            <tr>
                <td colspan="2">合并1</td>
                <td bgcolor="red">未合1</td>
            </tr>
        </table>
        <table width="300" frame="box" border="1">
            <caption>示例2</caption>
            <col  style="background-color: green;"/>
            <tr>
                <th>标题1</th>
                <td>内容1</td>
                <td>内容2</td>
            </tr>
            <tr>
                <th rowspan="2">合并1</th>
                <td align="right">未合1</td>
                <td>未合2</td>
            </tr>
            <tr>
                <td>未合3</td>
                <td>未合4</td>
            </tr>
        </table>
    </body>
</html>
    展示图片

相关文章