Как вы используете colspan и rowspan в таблицах HTML?

Я не знаю, как объединить строки и столбцы внутри таблиц HTML.

не могли бы вы помочь мне с созданием такой таблицы в HTML?

10 74
html html-table

10 ответов:

Я предлагаю:

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">&nbsp;</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>

ссылки:

95

если вы путаете, как работают макеты таблиц, они в основном начинаются с x=0, y=0 и работают через них. Давайте объясним с графикой, потому что они так весело!

когда вы начинаете таблицу, вы делаете сетку. Ваша первая строка и ячейка будут находиться в верхнем левом углу. Думайте об этом как о указателе массива, перемещающемся вправо с каждым увеличенным значением x и перемещающимся вниз с каждым увеличенным значением y.

для первой строки вы определяете только две ячейки. Один охватывает 2 строки вниз и один охватывает 4 столбца поперек. Поэтому, когда Вы дойдете до конца первого ряда, это выглядит примерно так:

Preview #0001

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

теперь, когда строка закончилась, "указатель массива" переходит к следующей строке. Поскольку позиция x 0 уже занята предыдущей ячейкой, x переходит в позицию 1, чтобы начать заполнение ячеек. * см. примечание о разнице между диапазонами строк.

эта строка имеет четыре ячейки, в которые все 1х1 блоки, заполняющие одинаковую ширину ряда над ним.

Preview #0002

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

следующая строка - это все ячейки 1x1. Но, например, что делать, если вы добавили дополнительную ячейку? Ну, он просто выскочит с края справа.

Preview #0003

<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? То, что вам нужно рассмотреть здесь, это то, что даже если вы не собираетесь быть добавляя еще несколько ячеек в следующую строку, строка все равно должна существовать (даже если это пустая строка). Если вы попытаетесь добавить новые ячейки в строку сразу после этого, вы заметите, что он начнет добавлять их в конец нижней строки.

Preview #0004

<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>

наслаждайтесь прекрасным миром создания таблиц!

102

если кто-то ищет 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>

кроме того, если вы хотите добавить левый и правый к существующему набору строк, вы можете достичь того же результата, бросив их в свернутом colspan в период:

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </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>
12

использовать rowspan Если вы хотите расширить ячейки вниз и colspan чтобы продлить по.

5

можно использовать rowspan="n" на элементе td, чтобы сделать его span n строки, и colspan="m" на элементе td, чтобы сделать его span m столбцы.

похоже, что ваш первый td нуждается в rowspan="2" и далее ТД должен был colspan="4".

3

свойство, которое вы ищете, что первый 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>
2
<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
1
<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>
0

это похоже на вашу таблицу

  <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>

0

Colspan и Rowspan Таблица делится на строки и каждая строка разделена на ячейки. В некоторых ситуациях нам нужно, чтобы ячейки таблицы охватывали (или объединялись) более одного столбца или строки. В этих ситуациях мы можем использовать атрибуты Colspan или Rowspan.

Colspan Атрибут colspan определяет количество столбцов, которые ячейка должна охватывать (или объединять) по горизонтали. То есть вы хотите объединить две или более ячеек подряд в одну ячейку.

<td colspan=2 >

как colspan ?

<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>
0