Сложное выражение таблицы в HTML

Я создал html-файл для восстановления таблиц в образе документа.Сложное выражение таблицы в HTML

Таблица изображения

Я думаю (каждое число означает последовательность строк.)

То, что я сделал

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    padding: 4px; 
 
</style> 
 
<table x=452 y=846 width=506 height=461> 
 
    <tr> 
 
    <td align=center width=59 height=56 rowspan=3 colspan=1>X</td> 
 
    <td align=center width=68 height=33 rowspan=2 colspan=1>X</td> 
 
    <td align=center width=140 height=10 rowspan=1 colspan=2>X</td> 
 
    <td align=center width=68 height=56 rowspan=3 colspan=1>X</td> 
 
    <td align=center width=131 height=10 rowspan=1 colspan=2>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=59 height=65 rowspan=3 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td> 
 
    <td align=center width=212 height=19 rowspan=1 colspan=3>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td> 
 
    <td align=center width=68 height=42 rowspan=2 colspan=1>X</td> 
 
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td> 
 
    <td align=center width=203 height=19 rowspan=1 colspan=3>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=110 rowspan=4 colspan=1>X</td> 
 
    <td align=center width=140 height=64 rowspan=2 colspan=2>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=203 height=19 rowspan=1 colspan=3>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=87 rowspan=3 colspan=1>X</td> 
 
    <td align=center width=203 height=87 rowspan=3 colspan=3>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=284 height=19 rowspan=1 colspan=4>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=59 height=42 rowspan=2 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=203 height=19 rowspan=1 colspan=3>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=42 rowspan=2 colspan=1>X</td> 
 
    <td align=center width=68 height=42 rowspan=2 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=203 height=111 rowspan=5 colspan=3>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=68 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=131 height=42 rowspan=2 colspan=2>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=68 height=65 rowspan=3 colspan=1>X</td> 
 
    <td align=center width=68 height=65 rowspan=3 colspan=1>X</td> 
 
    <td align=center width=131 height=19 rowspan=1 colspan=2>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=19 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=140 height=19 rowspan=1 colspan=2>X</td> 
 
    <td align=center width=131 height=19 rowspan=1 colspan=2>X</td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center width=59 height=10 rowspan=1 colspan=1>X</td> 
 
    <td align=center width=419 height=10 rowspan=1 colspan=6>X</td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

Кто-нибудь знает, почему это не правильно? Я сделал 59 ячеек «tag td», но есть больше ячеек, которые я могу видеть.

источник

2015-07-29 Dawoon Yi

Строка 16 на самом деле 2 ряда. – Phylogenesis

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style> 
    table{ border-top: 1px solid #ddd; border-left: 1px solid #ddd; margin:0; padding:0; border-spacing:0; text-align: center;} 
    table td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; margin:0; padding:0; width:50px;} 
    table tr { height: 22px; } 

    .first-row { background-color: red; } 
    .second-row { background-color: orange; } 
    .third-row { background-color: yellow; } 
    .forth-row { background-color: green; } 
    .fifth-row { background-color: cornflowerblue; } 
    .sixth-row { background-color: blue; } 
    .seventh-row { background-color: purple; } 
    </style> 
</head> 
<body> 

<table> 
    <!-- 1 row --> 
    <tr class="first-row"> 
    <td rowspan="3">1</td> 
    <td rowspan="2">&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <td rowspan="3">&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    </tr> 

    <!-- 2 row --> 
    <tr class="second-row"> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td>2</td> 
    <td>&nbsp;</td> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 

    <!-- 3 row --> 
    <tr class="third-row"> 
    <!-- <td></td> --> 
    <td colspan="2">3</td> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    <td rowspan="3">&nbsp;</td> 
    </tr> 

    <!-- 4 row --> 
    <tr class="forth-row"> 
    <td>4</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <td colspan="3">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 

    <!-- 5 row --> 
    <tr class="fifth-row"> 
    <td>5</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <td rowspan="2">&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 

    <!-- 6 row --> 
    <tr class="sixth-row"> 
    <td>6</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td colspan="3">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 7 row --> 
    <tr class="seventh-row"> 
    <td rowspan="4">7</td> 
    <td rowspan="2" colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    <td colspan="3">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 8 row --> 
    <tr class="first-row"> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td rowspan="3">8</td> 
    <td rowspan="3" colspan="3">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 9 row --> 
    <tr class="second-row"> 
    <!-- <td></td> --> 
    <td>9</td> 
    <td></td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 10 row --> 
    <tr class="third-row"> 
    <!-- <td></td> --> 
    <td>10</td> 
    <td></td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 11 row --> 
    <tr class="forth-row"> 
    <td>11</td> 
    <td colspan="4">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td></td> 
    <td rowspan="2">&nbsp;</td> 
    </tr> 
    <!-- 12 row --> 
    <tr class="fifth-row"> 
    <td colspan="3">12</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    <td rowspan="2">&nbsp;</td> 
    <td rowspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 13 row --> 
    <tr class="sixth-row"> 
    <td colspan="3" rowspan="5">13</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td>&nbsp;</td> 
    </tr> 
    <!-- 14 row --> 
    <tr class="seventh-row"> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td>14</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <!-- 15 row --> 
    <tr class="first-row"> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td>15</td> 
    <td>&nbsp;</td> 
    <td colspan="2" rowspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 16 row --> 
    <tr class="second-row"> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td rowspan="3">16</td> 
    <td rowspan="3">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 17 row --> 
    <tr class="second-row"> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 18 row --> 
    <tr class="third-row"> 
    <td>17</td> 
    <td colspan="2">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <td colspan="2"></td> 
    <!-- <td></td> --> 
    </tr> 
    <!-- 19 row --> 
    <tr class="forth-row"> 
    <td>18</td> 
    <td colspan="6">&nbsp;</td> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    <!-- <td></td> --> 
    </tr> 
</table> 

</body> 
</html>

16-я линия на самом деле две линии. См. Пример.

источник

2015-07-30 02:50:57 gafani

Спасибо! Я мог понять, что я пропустил. –

Как я понял, физический номер строки является ключом. Еще раз спасибо. –

Сложное выражение таблицы в HTML

ответ

Смежные вопросы