Для создания таблицы нам потребуется тег <table>…</table> — это контейнер, в котором прописываются строки и ячейки с содержимым. Давайте рассмотрим на примере:
Между тегов <td> запишите какой нибудь текст, чтобы в браузере было понятно где какая ячейка. Сохраните изменения, откройте шаблон в браузере. Давайте добавим к таблице границу, для этого нужен атрибут border. Допишите <table border=»1″>…</table>. Увеличим отступы внутри ячейки при помощи атрибута cellpadding, и расстояние между ячейками уменьшим до нуля при помощи атрибута cellspacing. Чтобы таблица была полнее, скопируйте имеющуюся строку несколько раз, т.е. сделайте таблицу из 3 строк, например:
Ячейки таблицы можно объединять. Чтобы объединить ячейки по горизонтали нужен атрибут colspan для тега <td>. А чтобы объединить ячейки по вертикали нужен атрибут rowspan. Для примера, допустим нам нужно в первой строке объединить все пять ячеек. Для этого мы пишем <td colspan=»5″>…</td>, а остальные ячейки в строке удаляем:
А теперь давайте объединим ячейки по вертикали. Возьмем первую ячейку во второй строке и первую ячейку в третьей строке. Удаляем ячейку в третьей строке, а для первой запишем <td rowspan=»2″>…</td>:
В браузере получим такой результат:
Видеоматериал по этому уроку:
http://youtu.be/jWeqcBxbNvY
Источник: http://psd-html-css.ru/html/html-tablica
Источник: