• HTML 笔记 表格

    1 表格基本语法

    tr：table row

    th：table head

    2 表格属性

    2.1 基本属性

    • 表格的基本属性是指表格的行、列和单元格
    • 但并不是每个表格的单元格大小都是统一的，所以需要设计者通过一些属性参数来修改表格的样子，让它们可以更更多样化。
    • 这些属性参数包括行高、宽度等。
      • 1．行高height属性
      • 2．宽度width属性
      • 3. 边框Border属性
      • 4．单元格大小属性height和width
    4. "1" height="100%" width="100%">
    5.    
    6.        
    7.        
    8.    
    9.    
    10.         
    11.         
    12.    
      14. "50" width="100"> Head 1  Head 2 
       row, cell 1  row, cell 2

    百分比表示所占浏览器的大小 

    绝对数字表示像素值大小

    2.2 其他属性

    • bgcolor: 定义表格或者单元格的背景颜色
    • background: 定义表格或者单元格的背景图片
    4. "1" height="100%" width="100%" bgcolor='lightgreen'>
    5.    
    6.        
    7.        
    8.    
    9.    
    10.         
    11.         
    12.    
      14. "50" width="100" bgcolor='lightblue'> Head 1  Head 2 
      'red'> row, cell 1  row, cell 2

    3 合并单元格

    • 合并同一行的单元格时，要用到 colspan 属性
    • 合并同一排的单元格时，要用到 rowspan 属性
    1. html>
    2. <html>
    3. <body>
    4. table>
    5. <table border="3" >
    6.   <tr>
    7.     <td colspan="2">1&2td>
    8. 	<td>3td>
    9.     <td rowspan="3" >4&<br/>8&<br/>12td>
    10.   tr>
    11.  
    12.   <tr>
    13.     <td>5td>
    14.     <td>6td>
    15. 	<td>7td>
    16.   tr>
    17.  
    18.   <tr>
    19.     <td>9td>
    20.     <td>10td>
    21. 	<td>11td>
    22.   tr>
    23.  
    24.   <tr>
    25.     <td>13td>
    26.     <td>14td>
    27. 	<td>15td>
    28. 	<td>16td>
    29.   tr>
    30. table>
    31.  
    32. body>
    33. html>

    4 表格标题

    • 标签是用来给表格添加标题的。
    • 默认情况下将位于表格上方居中的位置，且会根据表格的宽度自行调整位置。
    1. html>
    2. <html>
    3. <body>
    4. <table border="1" height="100%" width="100%">
    5.    <caption>表格题目caption>
    6.    <tr>
    7.        <th height="50" width="100"> Head 1 th>
    8.        <th > Head 2 th>
    9.    tr>
    10.    <tr>
    11.         <td> row, cell 1 td>
    12.         <td> row, cell 2 td>
    13.    tr>
    14. table>
    15. body>
    16. html>

    5 使用CSS 来定义表格属性

    • 利用CSS来定义表格单元格的height和width
    • 利用CSS来定义表格单元格的border属性
      • 可以按顺序设置如下属性：
        • border-width：
        • border-style:  dotted (点状) solid （实线） double （双线） dashed （虚线）;
        • border-color
    1. html>
    2. <html>
    3. <head>
    4. 	<style>
    5. 		table {
    6.             height: 300px; 
    7.             border: 2px solid lightblue;
    8.         }
    9.         table th {
    10.             height: 32px; 
    11.             width: 100px;
    12.             border: 10px dashed red;
    13.         }
    14.         table td {
    15.             border: 5px double green;
    16.         }
    17. 	style>
    18.  
    19. head>
    20.  
    21. <body>
    22. <table>
    23.    <tr>
    24.        <th> Head 1 th>
    25.        <th> Head 2 th>
    26.    tr>
    27.    <tr>
    28.         <td> row, cell 1 td>
    29.         <td> row, cell 2 td>
    30.    tr>
    31. table>
    32. body>
    33. html>

    table是最外圈

    table th是head部分（内圈）

    table td是 表格正文部分（内圈）

  • 相关阅读:
    JavaScript介绍，JavaScript与HTML结合使用的两种方式
    shell&&mysqldump 导出数据库结构并且导入到新数据库（合并数据）
    知识图谱从入门到应用——知识图谱的获取与构建：知识工程与知识获取
    《计算机视觉中的多视图几何》笔记（0）
    曾遭作者“删库”的faker.js，现被社区接手；Apache Ambari 项目被弃用；FFmpeg 5.0 发布 | 开源日报
    springboot
    【计网】二、物理层
    接口
    k8s使用minio分布式集群作为存储--基础配置篇
    std::unique_ptr和lambda表达式混用踩坑日记
  • 原文地址：https://blog.csdn.net/qq_40206371/article/details/133645143