У меня есть массив элементов, которые я перебираю и для каждого элемента создаю <td></td>.Таблица разделов таблицы html в двух?
Если у меня есть, например, 10 элементов, он создаст таблицу с одним столбцом и 10 строками.
Есть ли способ разделить (в HTML или CSS), чтобы разделить этот столбец пополам, так что я получаю 2 столбца с 5 элементами?
попробовать что-то вроде этого:
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>Вы можете использовать такой код:
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; }Если вы планируете делать это вручную, то вы должны использовать эту таблицу структуру:
<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>И увидел «Tr» означает «ряд»
С другой стороны, если вы хотите, чтобы это произошло автоматически через JScript , тогда вам нужно запрограммировать два оператора «if» для управления процессом. или вы также можете использовать «в то время как».
Желательно, чтобы у вас был прикрепленный код, чтобы мы могли помочь вам больше.
Надеюсь, что это было полезно
См. Следующий код и его работу. Что я сделал:
В JavaScript, я сделал функцию, которая:
(а) проходит через массив,
(b) создает строку
(c) добавляет две ячейки в таблицу (вот почему я увеличил счетчик i до + = 2)
(d) устанавливает их innerHTML к значению массива
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>
вы хотите, чтобы они были в том же порядке (шестой элемент на вершине во второй колонке) ли? – VeganCreamPie
Подсчитайте элементы массива, разделите их на две части и постройте две таблицы столбцов, которые будут иметь желаемый результат –