正文

HTML5表格从入门到精通：50个实战练习题解锁高效表格制作技巧

/0 浏览量
0322

目录

  1. HTML5表格基础
  2. 表格布局与样式
  3. 表格数据操作
  4. 表格高级应用
  5. 实战练习题

1. HTML5表格基础

1.1 表格的基本结构

HTML5表格使用<table>标签来创建，内部使用<tr>标签表示行，<th>标签表示表头，<td>标签表示单元格。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

1.2 表格属性

  • border: 设置表格边框的宽度。
  • width: 设置表格的宽度。
  • height: 设置表格的高度。
  • align: 设置表格的水平对齐方式。
  • valign: 设置表格的垂直对齐方式。

2. 表格布局与样式

2.1 表格布局

表格布局可以使用<thead>, <tbody>, <tfoot>标签进行分割，分别表示表头、主体和表尾。

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>100</td>
    </tr>
  </tfoot>
</table>

2.2 表格样式

表格样式可以通过CSS进行设置，包括字体、颜色、边框等。

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

3. 表格数据操作

3.1 添加行和单元格

使用JavaScript可以动态地向表格中添加行和单元格。

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1); // 在表格末尾添加行
  var cell1 = row.insertCell(0); // 添加单元格
  var cell2 = row.insertCell(1); // 添加单元格
  cell1.innerHTML = "新内容1";
  cell2.innerHTML = "新内容2";
}

3.2 删除行和单元格

同样可以使用JavaScript删除表格中的行和单元格。

function deleteRow() {
  var table = document.getElementById("myTable");
  var rowCount = table.rows.length;
  table.deleteRow(rowCount - 1); // 删除最后一行
}

4. 表格高级应用

4.1 表格排序

使用JavaScript可以实现表格的排序功能。

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

4.2 表格筛选

使用JavaScript可以实现表格的筛选功能。

function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

5. 实战练习题

以下是一些实战练习题，帮助您掌握HTML5表格制作技巧。

  1. 创建一个包含表头和3行数据的表格，使用CSS设置样式。
  2. 使用JavaScript动态向表格中添加一行数据。
  3. 实现表格排序功能，根据第一列进行排序。
  4. 实现表格筛选功能，根据第二列筛选数据。
  5. 使用HTML5 Canvas绘制表格，并添加交互功能。

通过以上实战练习，相信您已经掌握了HTML5表格的制作技巧。祝您在表格制作的道路上越走越远！

-- 展开阅读全文 --