Нарисуйте несколько прямоугольников с помощью таблицы тега

Я пытаюсь создать эту форму с таблиц: The shape Нарисуйте несколько прямоугольников с помощью таблицы тега

Мой HTML-код это:

<html> 
    <head> 
     <title>Exercise!</title> 
    </head> 
    <body> 
     <table border="1" width="100%" height="100%"> 
      <tr> 
       <td colspan="2"></td> 
       <td colspan="3"></td> 
       <td colspan="2"></td> 
      </tr> 
      <tr> 
       <td colspan="1"></td> 
       <td colspan="2"></td> 
       <td colspan="1"></td> 
       <td colspan="2"></td> 
       <td colspan="1" rowspan="2"></td> 
      </tr> 
      <tr> 
       <td colspan="2"></td> 
       <td colspan="1"></td> 
       <td colspan="2"></td> 
       <td colspan="1"></td> 

      </tr> 
     </table> 
    </body> 
</html>

Этот HTML код получает мне эту неправильную форму:

wrong shape

Но когда я добавить строку без colspan и rowspan s, браузер показывает эту правильную форму, но с дополнительной строкой:

almost correct shape

Вот код, который создает правильную форму, но с дополнительной строкой:

<html> 
    <head> 
     <title>Exercise!</title> 
    </head> 
    <body> 
     <table border="1" width="100%" height="100%"> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td colspan="2"></td> 
       <td colspan="3"></td> 
       <td colspan="2"></td> 
      </tr> 
      <tr> 
       <td colspan="1"></td> 
       <td colspan="2"></td> 
       <td colspan="1"></td> 
       <td colspan="2"></td> 
       <td colspan="1" rowspan="2"></td> 
      </tr> 
      <tr> 
       <td colspan="2"></td> 
       <td colspan="1"></td> 
       <td colspan="2"></td> 
       <td colspan="1"></td> 

      </tr> 
     </table> 
    </body> 
</html>

Что таким проблема?

EDIT: IE показывает большой пустой прямоугольник !!!! И что это за проблема?

источник

2012-01-10 Mahdi Ghiasi

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

источник

2012-01-10 20:41:37 Rodolfo

Таким образом, не существует какой-либо способ, чтобы создать эту форму с таблицей тегами? –

Другая возможность - ячейка/cellpadding. Попробуйте добавить в ячейку таблицы 'cellspacing = 0 cellpadding = 0'. Чтобы убедиться, у вас есть несколько вариантов: - Укажите ширину для каждого td. - Переместите все границы и вместо этого используйте цвета для идентификации полей, таким образом, вы можете определить, действительно ли проблема - границы – Rodolfo

Также с ячейками и cellpadding = 0, также есть одна и та же проблема ... –

Прекрасно работает для меня в WebKit. Избавьтесь от границ на каждом tr наверняка. Какой браузер вы используете? (Кроме того, я добавил rowspan.)

скрипка: http://jsfiddle.net/whqVC/

источник

2012-01-10 20:47:54 benesch

Я отредактировал мой вопрос , rowspan отсутствовал. Я использую Chrome и IE. –

Chrome показывает изображения на мой вопрос, и IE просто показывает большой пустой прямоугольник! –

Нарисуйте несколько прямоугольников с помощью таблицы тега

ответ

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