HTML таблица

Для создания таблицы нам потребуется тег <table>...</table> - это контейнер, в котором прописываются строки и ячейки с содержимым. Давайте рассмотрим на примере:

  1. Создадим новый html-документ, и назовем его table.html
  2. Между тегами <body>...</body> вставим контейнер для таблицы <table>...</table>;
  3. Далее нам нужно записать первую строку, строки обозначаются тегом <tr>...</tr>;
  4. В этой строке создадим пять ячеек. Ячейки обозначаются при помощи тега <td>...</td>:

HTML таблица

Между тегов <td> запишите какой нибудь текст, чтобы в браузере было понятно где какая ячейка. Сохраните изменения, откройте шаблон в браузере. Давайте добавим к таблице границу, для этого нужен атрибут border. Допишите <table border="1">...</table>. Увеличим отступы внутри ячейки при помощи атрибута cellpadding, и расстояние между ячейками уменьшим до нуля при помощи атрибута cellspacing. Чтобы таблица была полнее, скопируйте имеющуюся строку несколько раз, т.е. сделайте таблицу из 3 строк, например:

HTML таблица

Ячейки таблицы можно объединять. Чтобы объединить ячейки по горизонтали нужен атрибут colspan для тега <td>. А чтобы объединить ячейки по вертикали нужен атрибут rowspan. Для примера, допустим нам нужно в первой строке объединить все пять ячеек. Для этого мы пишем <td colspan="5">...</td>, а остальные ячейки в строке удаляем:

HTML таблица

А теперь давайте объединим ячейки по вертикали. Возьмем первую ячейку во второй строке и первую ячейку в третьей строке. Удаляем ячейку в третьей строке, а для первой запишем <td rowspan="2">...</td>:

HTML таблица

В браузере получим такой результат:

HTML таблица

Видеоматериал по этому уроку:

http://youtu.be/jWeqcBxbNvY

Источник: http://psd-html-css.ru/html/html-tablica

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

HTML таблица | | 2012-03-20 10:07:00 | | Статьи Web-мастеру | | Для создания таблицы нам потребуется тег ... - это контейнер, в котором прописываются строки и ячейки с содержимым. Давайте рассмотрим на примере:Создадим новый html-документ, и назовем его table | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: