zoukankan      html  css  js  c++  java
  • HTML表格标签

    1.表格的主要作用
       显示展示数据,表格不是用来布局页面的,而使用来展示数据的。


    2.表格的主要语法
      <table>
         <tr>
          <td>单元格的文字</td>
          ...
        <tr>
      <table>
     (1)<table>用来定义表格标签。
     (2)<tr>标签用于定义表格中的行,必须嵌套在<table>标签中。
     (3)<td>用于定义表格中的单元格,必须嵌套在<tr>中。
     (4)字母td指的是表格数据(table data),即数据单元格中的内容。


    3.表头单元格标签
       一般的表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容 加粗 居中 显示
        <th>标签表示HTML表格的表头部分(table head的缩写)
          <table>
            <tr>
             <th>姓名<th>
             ...
             </tr>
         </table>


    4.表格属性
        表格标签这部分实行我们实际不常用,后面通过CSS来设置
        目的有两个:
        1.记住这些英语单词,后面的CSS会使用。
        2.直观的感受表格的外观形态。
        属性名                 属性值              描述
        align                   left center          规定表格相对周围元素的对齐方式
        border                  1或者""             边框
        celloandding        像素值              规定单元边沿与其内容之间的空白,默认1像素。
        cellspacing           像素值              规定单元格之间的空白,默认2像素。
        width         像素值或百分比          规定表格宽度


    5.表格的结构标签

        使用场景:因为表格可能很长,为了更好地表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
        <thead>标签表格的头部区域,<tbody>标签 表格的主体区域 这样可以更好地风情表格结构


    6.合并单元格
        特殊情况下,可以把多个单元格合并为一个单元格
        (1)合并单元格的方式
            跨行合并:rowspan=“合并单元格的个数”
            跨列合并:colspan=“合并单元格的个数”
        (2)目标单元格
            跨行:最上侧单元格为目标单元格 写合并代码。
            跨列: 最左侧的单元格为目标的单元格,写合并代码。
        (3)合并单元格的步骤。
        合并单元格三步曲:
        1.先确定是跨行还是跨列合并
        2.找到目标单元格 写上合并方式。比如<td colspan = "2"> </td>.
        3.删除多余单元格

  • 相关阅读:
    ASP.NET小知识
    追溯ASP.NET发展史
    《ASP.NET MVC4 WEB编程》学习笔记------UrlHelper
    Python数据分析8-----网页文本处理
    sklearn学习9----LDA(discriminat_analysis)
    树(8)----路径和
    树(7)-----二叉树的序列化和反序列化
    xgboost学习
    Python笔记24-----迭代器、生成器的使用(如嵌套列表的展开、树的遍历等)
    算法20-----卡诺兰数
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/12952868.html
Copyright © 2011-2022 走看看