HTML Tables Study Guide - Creating Beautiful and Efficient Data Presentation

introduction

An HTML table is a common and important web element that presents data, information, and content in a structured manner. In this detailed guide, we will learn how to create HTML tables in depth, including the basic structure of tables, style design, merged cells, sorting functions, and accessibility, etc., to help you create beautiful and efficient data display methods.

Table of contents

1. HTML Table Basics
   • Basic structure of the table
   • Add headers and cells
2. Table style design
   • modify table style
   • Change table borders, colors and spacing
   • Add background color and border effects
3. table merged cells
   • merge rows or columns
   • Merge cells across multiple rows or columns
4. table sorting function
   • Using JavaScript to implement table sorting
5. Accessibility of forms
   • Add appropriate semantic information
   • Improving Accessibility Using ARIA Attributes

1. HTML table basics

The basic structure of an HTML table <table>starts with the element, and then uses <tr>the element to represent the row of the table, and then uses <th>the element to define the header cell in the row, and uses <td>the element to define the data cell.

1.1 Basic structure of the table

Example of basic structure:

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

1.2 Add headers and cells

Use <th>the element to define the header cells of the table and <td>the element to define the data cells.

Example headers and cells:

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
</table>

2. Table style design

CSS can be used to style tables, including modifying table styles, changing table borders, colors, and spacing, and adding background colors and border effects.

2.1 Modify the table style

Example of modifying table style:

table {
    
    
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 表格宽度占满父容器 */
}

th, td {
    
    
    padding: 10px; /* 设置单元格内边距 */
}

2.2 Change table borders, colors and spacing

Example of changing table borders, colors and spacing:

table {
    
    
  border: 2px solid #ddd; /* 表格边框 */
  border-spacing: 0; /* 单元格间距 */
}

2.3 Add background color and border effect

You can use CSS background colors and border effects to increase table readability and aesthetics, for example:

th {
    
    
  background-color: #f2f2f2; /* 表头背景色 */
  border-bottom: 2px solid #ddd; /* 表头下边框 */
}

td:hover {
    
    
  background-color: #ddd; /* 鼠标悬停背景色 */
}

tr:nth-child(even) td {
    
    
  background-color: #f2f2f2; /* 奇数行背景色 */
}

3. Merge cells in the table

In HTML tables, it is sometimes necessary to merge cells for easier viewing of data. We can use rowspanthe and colspanattributes to achieve the function of merging cells.

3.1 Merge rows or columns

Use rowspanthe attribute to merge cells, for example:

<table>
    <tr>
        <th rowspan="2">姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
</table>

rowspan="2"Indicates that the cells are to be merged into two rows.

3.2 Merge cells across multiple rows or columns

Use rowspanthe or colspanattribute to merge multiple cells, for example:

<table>
    <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">个人信息</th>
    </tr>
    <tr>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
</table>

rowspan="2"means span two rows of cells, colspan="2"means span two columns of cells.

4. Table sorting function

In HTML tables, we can use JavaScript to implement simple table sorting functions.

4.1 Using JavaScript to implement table sorting

We can use JavaScript to implement the table sorting function, for example:

<table id="myTable">
    <tr>
        <th onclick="sortTable(0)">姓名</th>
        <th onclick="sortTable(1)">年龄</th>
        <th onclick="sortTable(2)">性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
</table>

<script>
function sortTable(n) {
      
      
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
      
      
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      
      
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
      
      
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
      
      
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
      
      
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
      
      
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      
      
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;      
    } else {
      
      
      if (switchcount == 0 && dir == "asc") {
      
      
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

The code uses a sorting algorithm to sort according to the clicked header, and supports ascending and descending sorting.

5. Accessibility of forms

To improve accessibility, we need to add appropriate semantic information and ARIA attributes to HTML tables.

5.1 Add appropriate semantic information

You can use captionthe element to add a title to the table, theadthe element to represent the header of the table, tbodythe element to represent the body of the table, tfootthe element to represent the footer of the table, and so on.

Examples of appropriate semantic information:

<table>
    <caption>学生信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>女</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">共 2 个学生</td>
        </tr>
    </tfoot>
</table>

5.2 Improving accessibility with ARIA attributes

You can use ARIA attributes to add accessibility features to tables, for example:

<table role="table" aria-label="学生信息表">
    <caption>学生信息表</caption>
    <thead>
        <tr role="row">
            <th role="columnheader">姓名</th>
            <th role="columnheader">年龄</th>
            <th role="columnheader">性别</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td role="cell">张三</td>
            <td role="cell">25</td>
            <td role="cell">男</td>
        </tr>
        <tr role="row">
            <td role="cell">李四</td>
            <td role="cell">30</td>
            <td role="cell">女</td>
        </tr>
    </tbody>
    <tfoot>
        <tr role="row">
            <td role="cell" colspan="3">共 2 个学生</td>
        </tr>
    </tfoot>
</table>

This code adds roleand aria-labelattributes to the table to improve accessibility for accessibility users.