• table边框表头单元格空间合并等设置


    表格由<table>标签来定义,每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    1 HTML 表格的基本结构:
    2 <table></table>:定义表格
    3 <th></th>:定义表格的标题栏(文字加粗)
    4 <tr></tr>:定义表格的行
    5 <td></td>:定义表格的列

    HTML 表格和边框属性,如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框,使用边框属性border来显示一个带有边框的表格:

    1 <table border="1">
    2     <tr>
    3         <td>Row 1, cell 1</td>
    4         <td>Row 1, cell 2</td>
    5     </tr>
    6 </table>

    HTML 表格表头单元格:表格的表头单元格使用<th>标签进行定义;表格的表头单元格属性主要是一些公共属性,如:align、dir、width、height。 大多数浏览器会把表头显示为粗体居中的文本:

     1 <table border="1">
     2     <tr>
     3         <th>Header 1</th>
     4         <th>Header 2</th>
     5     </tr>
     6     <tr>
     7         <td>row 1, cell 1</td>
     8         <td>row 1, cell 2</td>
     9     </tr>
    10     <tr>
    11         <td>row 2, cell 1</td>
    12         <td>row 2, cell 2</td>
    13     </tr>
    14 </table>

    表格标题<caption>:在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题,并在表的顶部显示出来*此标签在较新版本的HTML / XHTML中已弃用

    1 table border = "1">
    2     <caption>这是标题</caption>
    3     <tr>
    4         <td>row 1, column 1</td><td>row 1, columnn 2</td>
    5     </tr>         
    6     <tr>
    7         <td>row 2, column 1</td><td>row 2, columnn 2</td>
    8     </tr>
    9 </table>

    HTML表格高度和宽度:在<table>标签中您可以使用width(宽)和height(高)属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

     1 <table border = "1" width = "400" height = "150">
     2     <tr>
     3         <td>Row 1, Column 1</td>
     4         <td>Row 1, Column 2</td>
     5     </tr>
     6     <tr>
     7         <td>Row 2, Column 1</td>
     8         <td>Row 2, Column 2</td>
     9     </tr>
    10 </table>

    HTML表格背景:您可以使用以下方法之一设置HTML表格的背景,HTML5中不推荐使用bgcolor,background和bordercolor属性,不要使用这些属性:

    • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
    • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像
    • bordercolor属性 - 可以设置边框颜色。
     1 <body>
     2     <table border = "1" bordercolor = "green" bgcolor = "yellow">
     3         <tr>
     4             <th>Column 1</th>
     5             <th>Column 2</th>
     6             <th>Column 3</th>
     7         </tr>
     8     </table>
     9 <!-- 使用background属性需要提供图像 URL 地址-->
    10 <table border = "1" bordercolor = "green" background = "/images/test.png">
    11     <tr>
    12         <th>Column 1</th>
    13         <th>Column 2</th>
    14         <th>Column 3</th>
    15     </tr>
    16 </table>
    17 </body>

    HTML表格空间:cellspacing属性-定义表格单元格之间的空间 ,cellpadding属性-表示单元格边框与单元格内容之间的距离

     1 <table border = "1" cellpadding = "5" cellspacing = "5">
     2     <tr>
     3         <th>Name</th>
     4         <th>Salary</th>
     5     </tr>
     6     <tr>
     7         <td>其琛</td>
     8         <td>5000</td>
     9     </tr>
    10     <tr>
    11         <td>曼迪</td>
    12         <td>7000</td>
    13     </tr>
    14 </table>

    HTML合并单元格:如果要将两个或多个列合并为一个列,将使用colspan属性;如果要合并两行或更多行,则将使用rowspan属性。

     1 <table border = "1">
     2     <tr>
     3         <th>Column 1</th>
     4         <th>Column 2</th>
     5         <th>Column 3</th>
     6     </tr>
     7     <tr>
     8         <td rowspan = "2">Row 1 Cell 1</td>
     9         <td>Row 1 Cell 2</td>
    10         <td>Row 1 Cell 3</td>
    11     </tr>
    12     <tr>
    13         <td>Row 2 Cell 2</td>
    14         <td>Row 2 Cell 3</td>
    15     </tr>
    16     <tr>
    17         <td colspan = "3">Row 3 Cell 1</td>
    18     </tr>
    19 </table>

    HTML表格头部、主体、页脚:表格可以分为三个部分 - 头部,主体和页脚,如同word文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。头部,主体和页脚的对应的三个标签是:

    1. <thead> - 创建单独的表头
    2. <tbody> - 表示表格的主体
    3. <tfoot> - 创建一个单独的表页脚

    表可以包含多个<tbody>元素以指示不同的页面,但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前

     1 <table border = "1" width = "100%">
     2     <thead>
     3         <tr>
     4             <td colspan = "4">This is the head of the table</td>
     5         </tr>
     6     </thead>
     7          
     8     <tfoot>
     9         <tr>
    10             <td colspan = "4">This is the foot of the table</td>
    11         </tr>
    12     </tfoot>
    13          
    14     <tbody>
    15         <tr>
    16             <td>Cell 1</td>
    17             <td>Cell 2</td>
    18             <td>Cell 3</td>
    19             <td>Cell 4</td>
    20         </tr>
    21     </tbody>         
    22 </table>

    HTML表格的嵌套,您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

  • 相关阅读:
    jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
    【centOS7】centOS7上普通用户切换root用户,相互切换
    【elaseticsearch】elaseticsearch启动报错Caused by: org.elasticsearch.transport.BindTransportException: Failed to bind to [9300-9400]
    【docker】docker启动、重启、关闭命令,附带:docker启动容器报错:docker: Error response from daemon: driver failed programming external connectivity on endpoint es2-node
    【centOS】centos7 查看和关闭防火墙
    【elasticsearceh】elasticsearch.yml配置文件详解
    【docker】关于docker 中 镜像、容器的关系理解
    【xshell】xshell设置快捷键 设置Ctrl+C Ctrl+V快捷键为复制粘贴
    【docker】elasticsearch-head无法连接elasticsearch的原因和解决,集群健康值:未连接,ElasticSearch——跨域访问的问题
    【spring cloud】spring cloud Sleuth 和Zipkin 进行分布式链路跟踪
  • 原文地址:https://www.cnblogs.com/webaction/p/12585373.html
Copyright © 2020-2023  润新知