Html table split column in two?
Question
I have an array of elements that I iterate over and for each element create <td></td>.
If I have eg 10 elements, it will create a table with one column and 10 rows.
Is there a way to split (in HTML or CSS) to split that column in half, so I end up with 2 columns with 5 elements?
4 answers
solution1
2 2016-02-21 12:29:38
You can use code like this:
var table = document.createElement('table'); var array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; for (var i=0; i<array.length; i+=2) { // iterate every 2 items var tr = document.createElement('tr'); var td = document.createElement('td'); td.innerHTML = array[i]; // first element tr.appendChild(td); td = document.createElement('td'); td.innerHTML = array[i+1]; // second element tr.appendChild(td); table.appendChild(tr); } document.getElementsByTagName('body')[0].appendChild(table);
table td { border: 1px solid black; }
solution2
0 2016-02-21 12:27:52
Try something like this:
table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }
<!DOCTYPE html> <html> <head> </head> <body> <h2>Cell that spans two columns:</h2> <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h2>Cell that spans two rows:</h2> <table style="width:100%"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
solution3
0 2016-02-21 12:43:11
If you are planning on doing so manually then you have to use this table structure:
<table style="width:100%"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> </table>
And saw "Tr" stands for "row"
On the other hand if you want this to happen automatically through JScript then you need to program two " if " statements to control the process. or you can also use a " while " loop as well.
I wish you had the code attached so that we can help you more.
Hope this was helpful
solution4
0 2016-02-21 13:00:26
See the following code and its working. What I did was:
- Create an empty table tag with a class myTable
In JavaScript, I made a function that:
(a) traverses through an array,
(b) creates a row
(c) adds two cells to the table (thats why i incremented the counter i to +=2)
(d) Sets their innerHTML to the array value
- Right now the first entry of array goes to the bottom of the table, if you want it to the top, you can just traverse the array in reverse.
function populateTable() { var table = document.createElement('table'); var array = ['a', 'b','c','d','e','f','g','h'] for(i=0 ; i<array.length ;i+=2){ var row = table.insertRow(0); cell1 = row.insertCell(0); cell2 = row.insertCell(1); cell1.innerHTML = array[i]; cell2.innerHTML = array[i+1]; } document.getElementsByTagName('body')[0].appendChild(table); }
table, td { border: 1px solid black; }
<!DOCTYPE html> <html> <head> </head> <body> <button onclick="populateTable()">Populate Table</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.