Я не знаю, как объединить строки и столбцы внутри таблиц HTML.
Не могли бы вы помочь мне сделать такую таблицу в HTML?
Как вы используете colspan и rowspan в таблицах HTML?
Ответ 1
Я бы предложил:
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4"> </th>
</tr>
<tr>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IIII</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>Ответ 2
Если вы смущены тем, как работают макеты таблиц, они в основном начинаются с x = 0, y = 0 и прокладывают себе путь. Давайте объясним с графикой, потому что они так весело!
Когда вы начинаете таблицу, вы создаете сетку. Ваша первая строка и ячейка будут в верхнем левом углу. Подумайте об этом как о указателе массива, двигаясь вправо с каждым добавленным значением x и двигаясь вниз с каждым приращенным значением y.
Для вашей первой строки вы определяете только две ячейки. Один охватывает 2 строки вниз и один охватывает 4 столбца в поперечнике. Поэтому, когда вы достигаете конца своей первой строки, это выглядит примерно так:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
Теперь, когда строка закончилась, "указатель массива" переходит к следующей строке. Поскольку x-позиция 0 уже занята предыдущей ячейкой, x переходит в положение 1, чтобы начать заполнять ячейки. * См. Примечание о различии между рядами.
В этой строке есть четыре ячейки, которые являются всеми 1x1 блоками, заполняя ту же ширину строки над ней.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Следующая строка - все ячейки 1x1. Но, например, что, если вы добавили дополнительную ячейку? Ну, это просто выскочит с края вправо.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
* Но что, если мы вместо этого (а не добавляем лишнюю ячейку) сделали все эти ячейки равными 2? То, что вам нужно рассмотреть здесь, состоит в том, что даже если вы не собираетесь добавлять больше ячеек в следующую строку, строка все равно должна существовать (хотя это пустая строка). Если вы попытались добавить новые ячейки в строку сразу после этого, вы заметите, что он начнет добавлять их в конец нижней строки.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Наслаждайтесь прекрасным миром создания таблиц!
Ответ 3
Если кто-то ищет строку rowspan слева и справа, вот как вы можете это сделать:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}<table>
<tbody>
<tr>
<td rowspan="2">LEFT</td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td rowspan="2">RIGHT</td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
</tr>
</tbody>
</table>Ответ 4
Используйте rowspan, если вы хотите расширить ячейки вниз и colspan для расширения.
Ответ 5
Вы можете использовать rowspan="n" в элементе td, чтобы сделать его span n rows, и colspan="m" на td-элементе, чтобы сделать его span m.
Похоже, ваш первый td нуждается в rowspan="2", а для следующего td требуется colspan="4".
Ответ 6
Свойство, которое вы ищете для этого первого td, rowspan:
http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm
<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Ответ 7
<style type="text/css">
table { border:2px black dotted; margin: auto; width: 100%; }
tr { border: 2px red dashed; }
td { border: 1px green solid; }
</style>
<table>
<tr>
<td rowspan="2">x</td>
<td colspan="4">y</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
</tr>
<tr>
<td>nothing</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Ответ 8
<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>
Ответ 9
Он похож на вашу таблицу
<table border=1 width=50%>
<tr>
<td rowspan="2">x</td>
<td colspan="4">y</td>
</tr>
<tr>
<td bgcolor=#FFFF00 >I</td>
<td>II</td>
<td bgcolor=#FFFF00>III</td>
<td>IV</td>
</tr>
<tr>
<td>empty</td>
<td bgcolor=#FFFF00>1</td>
<td>2</td>
<td bgcolor=#FFFF00>3</td>
<td>4</td>
</tr>
Ответ 10
Colspan и Rowspan Таблица разделена на строки, и каждая строка делится на ячейки. В некоторых ситуациях нам нужно, чтобы ячейки таблицы охватывали (или объединяли) более одного столбца или строки. В этих ситуациях мы можем использовать атрибуты Colspan или Rowspan.
Colspan Атрибут colspan определяет количество столбцов, которые ячейка должна охватывать (или объединять) по горизонтали. То есть, вы хотите объединить две или несколько Ячейков в одну ячейку.
<td colspan=2 >
Как рассчитать?
<html>
<body >
<table border=1 >
<tr>
<td colspan=2 >
Merged
</td>
</tr>
<tr>
<td>
Third Cell
</td>
<td>
Forth Cell
</td>
</tr>
</table>
</body>
</html>
Rowspan Атрибут rowspan указывает количество строк, которые ячейка должна занимать вертикально. То есть вы хотите объединить две или более Ячейки в одном столбце с одной ячейкой по вертикали.
<td rowspan=2 >
Как Rowspan?
<html>
<body >
<table border=1 >
<tr>
<td>
First Cell
</td>
<td rowspan=2 >
Merged
</td>
</tr>
<tr>
<td valign=middle>
Third Cell
</td>
</tr>
</table>
</body>
</html>