具有 5 行和 5 列的 HTML 表格 [关闭]

Posted 2023-03-05

【中文标题】具有 5 行和 5 列的 HTML 表格 [关闭]

【英文标题】：HTML Table with 5 rows and 5 columns [closed]

【发布时间】：2016-02-23 19:57:51

【问题描述】：

如何创建一个 5 行 5 列的 html 表格？

我尝试了以下安排

<table  border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

但我只得到 5 列和 3 行。请帮忙

谢谢，有没有比每行写 5 行更简单的方法？

【问题讨论】：

您可以使用 javascript 和 for 循环来创建 n 列/行。

这个问题不是题外话！正如 Simo 指出的，答案是使用 Javascript。提问者可能没有意识到这一点。这已经不是小问题了：facebook.com/ProgrammersCreateLife/photos/…

@DavidI.Samudio ：很抱歉，我没看清你的意思。请你澄清一下好吗？

嗨@Yuriko，这个问题被关闭的原因是无关紧要的：“这个问题是由无法再复制的问题或简单的印刷错误引起的......”。潜在的问题是提问者只知道 HTML 并且直觉上正在寻找一种程序化的方法，在这种情况下是 JS，但他/她并没有意识到这一点。也许，这个问题与拖钓混淆了，但没有进行任何讨论，怀疑的好处也没有占上风。说明对初学者提问的容忍度真的很低。

有趣的是，它在 Facebook 上获得了很大的关注，很多用户对这个问题做出了反应，并批评社区缺乏对新人的支持。

【参考方案1】：

TL；DR：您只提供了 3 个 <tr> 标记，因此您只有 3 行。

在 HTML 中，表格具有以下基本结构¹：

table
|- row_1
|  |- data_1
|  `- data_2
|- row_2
|  |- ...
...

^{1 - 存在其他标记，例如 th、thead 等，但为了清楚起见，我将忽略它们。 More info here. (MDN Table element)}

您首先使用<table> 标记声明表，然后使用<tr> 标记声明行。 （t能够row。） 在每一行中，您可以声明数据容器<td>。 （t能够data）。

下面是一段 HTML 代码，用于创建一个 5 列 5 行的表格：

table 
  border-collapse: collapse;


table td 
  border: 1px solid black;

<table>
  <tr>
    <td>row_1/col_1</td>
    <td>col_2</td>
    <td>col_3</td>
    <td>col_4</td>
    <td>col_5</td>
  </tr>
  <tr>
    <td>row_2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>row_3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>row_4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>row_5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

【参考方案2】：

<tr> 是表格行的缩写。你只有 3 行，所以你只会得到 3 行而不是 5 行。再添加 2 行。

编辑：添加了一些 javascript。

let table = document.getElementById("table");

//fake data
const contentList = [
   //row1
   [title: "title",title: "title",title: "title"],
   //row2
   [title: "title",title: "title",title: "title"],
   //row3
   [title: "title",title: "title",title: "title"]
];

//function to generate a row.
const rowTemplate = (data, rowNumber) =>
    let rowString = "<tr>";
    data.forEach((td, index)=>
        rowString += `<td>$td.title, row: $rowNumber, column: $index</td>`;
    );
    rowString += "</tr>"
    return rowString;
;

//function to generate all the rows
const generateRows = (data, elementToPopulate) => 
    let htmlString = "";
    data.forEach((row,index)=>
        htmlString += rowTemplate(row, index);
    );
    elementToPopulate.innerHTML = htmlString;


//call method
generateRows(contentList, table);

<table  border="1" id="table">
</table>

【讨论】：

这似乎是答案的一部分，为什么它离题了？这个和一个 JS 循环（Asimo 评论）帮助新的 Web 开发人员在遇到某种障碍时了解如何编程。