HTML Table with 5 rows and 5 columns [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
How do I create an HTML table with 5 rows and 5 columns?
I tried the following arrangement
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
But I only get 5 columns and 3 rows. Please help
Thanks, is there an easier way than just writing 5 lines each?

Answer 1

TL;DR: You only provided 3 <tr> markups, so you only got 3 rows.
In HTML, tables have the following basic structure1:
table
|- row_1
| |- data_1
| `- data_2
|- row_2
| |- ...
...
1 - Other markups exist such as th, thead, etc. but for clarity's sake I'm ignoring them. More info here. (MDN Table element)
You first declare the table with the <table> markup, and then the rows with the <tr> markup. (table row.)
Inside each row, you can declare the data containers <td>. (table data).
Here's a snippet of HTML code to create a table with 5 columns and 5 rows:
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>

Answer 2

<tr> is short for table row. You only have 3, so you'll only get 3 rows and not 5. Add 2 more rows.
Edit: Added some 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>