Как мне составить эту таблицу, используя теги <table>, <tr>, <td>и <div>?

Question

Я хочу создать следующую таблицу, но у меня возникли некоторые трудности с выяснением, какие элементы использовать, когда. На данный момент эта таблица реализована с использованием тегов table, а первая строка выполняется с использованием тегов tr и td.

Настоящая проблема - это ячейки E, F, G и H. Я думал, что было бы возможно, чтобы прямоугольная область, созданная ячейками E, F, G и H, была реализована с использованием двух тегов div, но это не кажется, работает. Кроме того, не похоже, что я могу поместить <table> в тег table.

Answer 1

<table border="1">
    <tr>
        <td>Row 1</td>
        <td colspan="2">A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>        
    </tr>
    <tr>
        <td rowspan="2">Row 2</td>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td rowspan="2">I</td>
        <td rowspan="2">J</td>
    </tr>
    <tr>
        <td colspan="3">H</td>
    </tr>
</table>

jsFiddle: http://jsfiddle.net/77a3V/

rowspan и colspan ваши друзья.

Answer 2

Для полноты картины вы должны получить именно то, что у вас есть

<style>
td{
      border: 1px solid;  
      padding: 5px 0 0 5px;
      width: 50px;
     }

.red {
 background-color:red;   
}

.yellow {
    background-color: yellow;
}
</style>

<table>
    <thead/>
    <tbody>
        <tr class="yellow">
            <td>Row 1</td>
            <td colspan="2">A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr class="red">
            <td rowspan="2">Row 2</td>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td rowspan="2">I</td>
            <td rowspan="2">J</td>
        </tr>
        <tr class="red">
            <td colspan="3">H</td>
        </tr>
    </tbody>
</table>

См. Здесь: http://jsfiddle.net/63LZW/

Answer 3

На самом деле вам нужно будет использовать 3 строки, чтобы получить эту структуру. Используйте атрибуты colspan и rowspan.

"A" получит colspan из 2, "H" получит colspan из 3. "I и" J "получат rowspan из 2.

Answer 4

Вы думаете, я бы не хотел делать такие вещи после всего этого дня ....:)

http://jsfiddle.net/jeffrod/AXCae/