如何在20行表格上显示5条记录？

在20行表格上显示5条记录，可以使用以下方法：

HTML表格：使用HTML标签创建一个表格，设置表格的行数为20，然后将需要显示的5条记录逐行插入表格中。可以使用<table>、<tr>和<td>标签来创建表格结构，使用CSS样式来设置表格的样式。
JavaScript动态生成表格：使用JavaScript动态生成一个包含20行的表格，并将需要显示的5条记录插入到表格中的相应位置。可以使用DOM操作来创建表格元素，并使用JavaScript数组或对象来存储记录数据。
数据库查询结果：如果数据存储在数据库中，可以使用SQL查询语句来获取需要显示的5条记录，并将查询结果以表格的形式展示在页面上。具体的实现方式取决于所使用的数据库和编程语言。

无论使用哪种方法，都可以通过以下步骤来实现在20行表格上显示5条记录：

创建一个包含20行的表格结构。
遍历需要显示的5条记录。
将每条记录的数据插入到表格的相应位置。
根据需要，可以使用CSS样式来设置表格的样式，如表格边框、背景颜色等。

以下是一个示例的HTML和JavaScript代码，演示如何使用HTML表格和JavaScript动态生成表格来实现在20行表格上显示5条记录：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </table>

  <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

var data = [
  { col1: '数据1', col2: '数据2', col3: '数据3' },
  { col1: '数据4', col2: '数据5', col3: '数据6' },
  { col1: '数据7', col2: '数据8', col3: '数据9' },
  { col1: '数据10', col2: '数据11', col3: '数据12' },
  { col1: '数据13', col2: '数据14', col3: '数据15' }
];

var table = document.getElementById('myTable');

for (var i = 0; i < 5; i++) {
  var row = table.insertRow(i + 1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = data[i].col1;
  cell2.innerHTML = data[i].col2;
  cell3.innerHTML = data[i].col3;
}

这段代码会在表格中插入5行记录，每行包含3列数据。你可以根据实际需求修改数据和表格的样式。