• 表格


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

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

  • 相关阅读:
    P1073 最优贸易
    window.btoa()方法;使字符编码成base64的形式
    centOs7 忘记root密码
    window.addEventListener()/window.postMessage(”text“, '*')
    $(function(){})理解
    跨域资源共享/option 请求产生原因
    Angular: Can't bind to 'ngModel' since it isn't a known property of 'input'问题解决
    TypeScript
    盒子模型
    理解事件捕获等
  • 原文地址:https://www.cnblogs.com/zhangchaoran/p/6798657.html
Copyright © 2020-2023  润新知