zoukankan      html  css  js  c++  java
  • 表格

    为什么要使用表格?——整齐,规整

        在HTML文档中,广泛使用表格来存放网页上的文本和图像,进行布局。—— 使用表格显示数据,可以更直观和清晰

        在 HTML 文档中,表格主要用于显示数据。(虽然可以使用表格布局,但是不建议使用,它有很多弊端)

        HTML 制作表格的原理是使用相关标记(如:表格对象 table 标记、行对象 tr、单元格对象 td )来完成。

    1. 创建普通表格

        <table border="1">

          <tr>

            <td>单元格内容</td>

          </tr>

          <tr>

          ……

        </table>

        表格中的文字可以添加超链接

        表格中的文字也可以更改颜色,设置字体

        还可以把border属性删掉

        HTML5 中除了 td 标记提供两个单元格合并属性之外,<table> 和 <tr> 标记没有任何属性。

    2. 表格属性 —— HTML5 中不再支持它的任何属性

        <table border="1px" cellspacing="0px" cellpadding="5">   //cellspacing设置单元格与表框之间的距离

          <tr>                            cellpadding设置文本与单元格的距离

            <td>单元格内容</td>

          </tr>

          <tr>

          ……

        </table>

    3. 跨行跨列的表格

        跨列的单元格

          <tr>

            <td colspan="2">学生成绩</td>

          </tr>

          <tr>

            <td>语文</td>

            <td>98</td>

          </tr>

        跨行的单元格

          <tr>

            <td rowspan="2">学生成绩</td>

            <td>语文</td>

            <td>98</td>

          </tr>

          <tr>

            <td>数学</td>

            <td>96</td>

          </tr>

    4. 创建一个带标题的表格

        有时,为了方便表述表格,还需要在表格的上面加上标题。

        <caption>标题</caption>

    5. 编辑表格

       1、定义表格的表头

          常见的表头分为垂直和水平两种。—— 通过 <th> 标签来实现。

          <tr>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

          </tr>

       2、设置表格背景(table 的属性)

          当创建好表格后,为了美观,还可以设置表格的背景。如为表格定义背景颜色、为表格定义背景图片等。

          定义表格背景颜色: bgcolor="green"

          定义背景图片: background="images/1.gif"

       3、设置单元格背景(td 单元格的属性)

       4、合并单元格(td 单元格的属性)

          用 colspan 属性合并左右单元格

          用 rowspan 属性合并上下单元格

       5、设置单元格的行高和列宽

          使用 cellpadding 来创建单元格内容与其边框之间的空白,从而调整表格的行高与列宽。

    6. 完整的表格标记

        为了让表格结构更清晰,以及配合后面学习的 CSS 样式,更方便地制作各种样式的表格,表格中还会出现表头、主体、脚注等。

        按照表格结构,可以把表格的行分组,行组分为3类——“表头”、“主体” 和 “脚注”。三者对应的 HTML 标签一次为 <thead>、<tbody> 和 <tfoot>

        此外,标记 <caption> 表示表格的标题。(<caption> 标记必须紧随 <table> 标记之后)

  • 相关阅读:
    链表--判断一个链表是否为回文结构
    矩阵--“之”字形打印矩阵
    二叉树——平衡二叉树,二叉搜索树,完全二叉树
    链表--反转单向和双向链表
    codeforces 490C. Hacking Cypher 解题报告
    codeforces 490B.Queue 解题报告
    BestCoder19 1001.Alexandra and Prime Numbers(hdu 5108) 解题报告
    codeforces 488A. Giga Tower 解题报告
    codeforces 489C.Given Length and Sum of Digits... 解题报告
    codeforces 489B. BerSU Ball 解题报告
  • 原文地址:https://www.cnblogs.com/zhangchaoran/p/6798657.html
Copyright © 2011-2022 走看看