HTML Таблица справки по чередующемуся количеству ячеек - PullRequest
Новая
       13

HTML Таблица справки по чередующемуся количеству ячеек

0 голосов
/ 25 октября 2009

Что такое правильный HTML, если я хочу чередовать количество ячеек в каждой строке? Я хочу, чтобы 2 ячейки - это строки 1, 3 в строке 2, 2 в 3, 3 в 4 и т. Д. Аналогично кирпичной стене. У меня пока есть это, но это не так, как хотелось бы. Я знаю, что мог бы сделать это вложенные таблицы, но я могу сделать это с одной таблицей? 

<table border="1" cellpadding="10">
  <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
</table>

Ответы [ 4 ]

4 голосов
/ 25 октября 2009

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

<table width="360">
    <tr>
        <td align="center" width="180" colspan="3">x</td>
        <td align="center" width="180" colspan="3">x</td>
    </tr>
    <tr>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
    </tr>
</table>

Обратите внимание, что ширина таблицы легко делится на 2 и 3, а ширина явно задается в каждой ячейке.

0 голосов
/ 25 октября 2009

Один из способов сделать это - через CSS. Вы должны настроить таблицу настолько большой, насколько вам нужно (например, 4x4), а затем применить стиль к каждой ячейке в зависимости от ситуации. Было бы два стиля, кирпичный и пустой, один означающий «кирпич», а другой - пустое пространство.

Итак, вы можете сделать что-то вроде следующего: 

<html>
<head>
<style type="text/css">
  td { border-style:none; width:30px; }
  td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>
0 голосов
/ 25 октября 2009

Я почти уверен, что colspans должен иметь целочисленное значение, дроби не допускаются. Вы можете попробовать добавить фиктивную ячейку с шириной 0, отступом 0, полем 0 на строке с 3 ячейками 

<tr>
    <td colspan="2"> <span> X </span> </td> 
    <td colspan="2"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td><!-- dummy !--></td> 
</tr>
0 голосов
/ 25 октября 2009 
<table>
<tr>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td>Y</td>
</tr>
<tr>
 <td>Y</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...