表格

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

    在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> 标记之后)

原文地址:https://www.cnblogs.com/zhangchaoran/p/6798657.html