7. HTML 表格基础

表格是网页开发中最基础也最实用的元素之一,尽管现代前端开发中表格布局已被 CSS 布局方案取代,但在展示结构化数据时,表格依然发挥着不可替代的作用。本文将基于提供的代码素材,系统讲解 HTML 表格的核心概念与实用技巧。

一、表格的基本结构

一个完整的 HTML 表格由以下部分组成:

<table>
  <thead>    
    <tr>     
      <th>标题1th>  
      <th>标题2th>
    tr>
  thead>
  <tbody>    
    <tr>
      <td>数据1td>  
      <td>数据2td>
    tr>
  tbody>
  <tfoot>    
    <tr>
      <td>汇总1td>
      <td>汇总2td>
    tr>
  tfoot>
table>

核心元素说明:

  • : 定义表格容器
  • (Table Row): 定义表格行
  • (Table Header):定义表头单元格(默认加粗居中)
  • (Table Data): 定义标准单元格

    二、表格的基础属性

    1. 边框与间距控制

    <table border="1" cellpadding="10" cellspacing="5">
      
    table>
    
    • border:设置边框宽度(已过时,推荐使用 CSS)
    • cellpadding:单元格内容与边框的间距(推荐用 CSS padding 替代)
    • cellspacing:单元格之间的间距(推荐用 CSS border-spacing 替代)

    现代 CSS 替代方案:

    table {
       
      border-collapse: collapse; /* 合并边框 */
    }
    td, th {
       
      border: 1px solid #ddd;
      padding: 10px; /* 替代 cellpadding */
    }
    

    2. 表格尺寸控制

    <table width="80%" align="center">
      
    table>
    
    • width:设置表格宽度(推荐用 CSS width 替代)
    • align:设置对齐方式(已过时,推荐用 CSS margin: 0 auto 居中)

    三、表格的高级特性

    1. 单元格合并

    • 跨行合并 (rowspan)
    <tr>
      <td rowspan="2">合并两行td> 
      <td>普通单元格td>
    tr>
    

    你可能感兴趣的:(前端学习,#,html+css,html,前端)