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

【问题标题】：HTML Table with 5 rows and 5 columns [closed]具有 5 行和 5 列的 HTML 表格 [关闭]
【发布时间】：2016-02-23 19:57:51
【问题描述】：

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

我尝试了以下安排

<table width="100%" 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 上获得了很大的关注，很多用户对这个问题做出了反应，并批评社区缺乏对新人的支持。

标签： html

【解决方案1】：

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

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

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

^{¹ - 存在其他标记，例如 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 width="100%" border="1" id="table">
</table>

【讨论】：

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