Как создать таблицу в HTML?

В этом видеоуроке мы разберем:

  • Создание таблиц
  • Создание вложенных таблиц
  • Атрибуты таблиц

Скачать материалы
Как создать таблицу в HTML?
Скачать 12 видеоурок по HTML Размер: 18.1 MB, скачали: 254 раз.
Скачать исходники к 12 видеоуроку по HTML Размер: 86.22 kB, скачали: 182 раз.
Скачать Pixie Размер: 8.04 kB, скачали: 344 раз.
Как запустить видеоурок:
Как создать таблицу в HTML?

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Добро пожаловать в видеоурок, посвященный таблицам! Мы уже познакомились с основами HTMLсозданием ссылок, изображений и навигационных карт. Теперь мы перейдем на более сложный этап и познакомимся с таблицами. В этом видеоуроке мы с вами на примере простой таблички, состоящей из двух столбцов и трех строк, рассмотрим таблицы от начала до конца. «Таблицы» являются достаточно сложной темой, поэтому очевидно, что данный видеоурок вам нужно будет просмотреть ни один раз. В конце видеоурока будет дано домашнее задание.

Как сделать таблицу?

Давайте перейдем в код. Не будем тратить время на ерунду и сразу же начнем заниматься нашей табличкой. Открываем страницу about.html. Почему именно about.html – думаю понятно. Страница  index.html у нас заполнена и, поэтому, для простоты обзора нашей таблицы, мы будем использовать about.html.

Итак, сначала прописываем таблицу. Прописывается она в тегах <table></table>. Тег <table> может иметь внутри себя теги строк <tr></tr> и теги столбцов <td></td>.

 <table>
 <tr>
 <td>
 </td>
 </tr>
 </table>
 

Давайте посмотрим на нашу табличку: она состоит из двух столбцов и трех строк. Так как сначала прописываются строки, а первую строку и первый столбец мы уже прописали, то давайте пропишем второй столбец и еще две строки.

 <table>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 </table>
 

Прописали.

Для того, чтобы таблица отображалась, нам нужно задать какое-нибудь значение в ячейках. Это может быть текст или изображение. Введем сначала текст: «1 ячейка», «2 ячейка» , «3 ячейка» , «4 ячейка» , «5 ячейка» , «6 ячейка».

 <table>
 <tr>
 <td>1 ячейка</td>
 <td>2 ячейка</td>
 </tr>
 <tr>
 <td>3 ячейка </td>
 <td>4 ячейка </td>
 </tr>
 <tr>
 <td>5 ячейка </td>
 <td>6 ячейка </td>
 </tr>
 </table>
 

Сохраним документ и проверим в браузере. Как мы видим, задано шесть ячеек. Посмотрим на наш пример снова. Каждая ячейка имеет свой цвет. Цвет можно задать или отдельно для каждой ячейки, или задать фоновый цвет и некоторым ячейкам задать свой цвет. Мы воспользуемся вторым способом. Фоновый цвет у нас будет голубым, так как это наиболее используемый цвет в наших ячейках. А трем ячейкам установим свой цвет.

Как же узнать цвет ячейки? Для этого нам нужно использовать специальную бесплатную программку «Pixel».  Она достаточно проста в использовании. Наводим мышь на нужную нам область экрана и копируем с помощью горячих клавиш Ctrl+Alt+C. Скопировали, сворачиваем программу, открываем код и задаем цвет нашей таблице. Цвет, как вы помните, у нас задается с помощью атрибута bgcolor. Не забываем вводить решетку, и вставляем код цвета.

 <table bgcolor = "#00D9FA">
 <tr>
 <td>1 ячейка</td>
 <td>2 ячейка</td>
 </tr>
 <tr>
 <td>3 ячейка </td>
 <td>4 ячейка </td>
 </tr>
 <tr>
 <td>5 ячейка </td>
 <td>6 ячейка </td>
 </tr>
 </table>
 

Давайте сохраним и проверим снова. Теперь стало больше походить на таблицу, но все же не до конца.

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

 <table bgcolor = "#00D9FA">
 <tr>
 <td>1 ячейка</td>
 <td bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td bgcolor = "#3CF995">3 ячейка </td>
 <td>4 ячейка </td>
 </tr>
 <tr>
 <td>5 ячейка </td>
 <td bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраняем. Посмотрим, что у нас получилось — более-менее. Скачать браузеры вы можете из первого видеоурока по HTML.

Теперь зададим рамку. Рамка задается с помощью атрибута border. Поставим, например, три пикселя.

 <table bgcolor = "#00D9FA" border = "3">
 <tr>
 <td>1 ячейка</td>
 <td bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td bgcolor = "#3CF995">3 ячейка </td>
 <td>4 ячейка </td>
 </tr>
 <tr>
 <td>5 ячейка </td>
 <td bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Теперь стало видно, что это все-таки у нас таблица.

Давайте зададим цвет нашей рамке. Делается это с помощью атрибута bordercolor. Этот атрибут можно было использовать так же, как в уроке про изображения. Там тоже при ссылках задавалась рамка. Минус данного атрибута – он не поддерживается в браузере Opera. Поэтому далее мы будем тестировать наш сайт в браузере Mozilla Firefox. Итак, зададим цвет нашей рамки, как в примере. Снова воспользуемся программой «Pixel». Наводим курсор на рамку, копируем и вставляем в код.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C">
 <tr>
 <td>1 ячейка</td>
 <td bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td bgcolor = "#3CF995">3 ячейка </td>
 <td>4 ячейка </td>
 </tr>
 <tr>
 <td>5 ячейка </td>
 <td bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

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

Давайте зададим ширину и высоту наших ячеек. Для этого используем атрибуты height (высота) и width (ширина). Я задал высоту и ширину 200×200 пикселей.  Задаем эти атрибуты для всех ячеек.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C">
 <tr>
 <td height = "200" width = "200">1 ячейка</td>
 <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td>
 <td height = "200" width = "200" >4 ячейка </td>
 </tr>
 <tr>
 <td height = "200" width = "200" >5 ячейка </td>
 <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраняем, проверяем в браузере Mozilla Firefox. Размер ячеек изменился.

Теперь поработаем над рамкой. Давайте разберемся, что за расстояния у нас получились. На самом деле это у нас не рамка. Рамка – это однопиксельная полоса. А пространство между рамками – это отступ от ячеек. Давайте его уберем, а именно, зададим значение, равное нулю. Прописываем атрибут cellspacing, который означает «расстояние между ячейками». Ставим значение, равное нулю.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0">
 <tr>
 <td height = "200" width = "200">1 ячейка</td>
 <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td>
 <td height = "200" width = "200" >4 ячейка </td>
 </tr>
 <tr>
 <td height = "200" width = "200" >5 ячейка </td>
 <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраним и проверим. Да, стало значительно красивее.

Имеется похожий на cellspacing атрибут — cellpadding . Их нужно различать. Cellpaddig означает отступ от рамки до содержимого ячейки. Давайте мы его тоже поставим, например, равный трем.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3">
 <tr>
 <td height = "200" width = "200">1 ячейка</td>
 <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td>
 <td height = "200" width = "200">4 ячейка </td>
 </tr>
 <tr>
 <td height = "200" width = "200">5 ячейка </td>
 <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраним, обновим. Вот появился наш отступ в три пикселя.

Давайте сделаем так, чтобы наш текст в ячейке отображался по центру. Осуществим это либо с помощью тега <center>, либо с помощью атрибута align. Давайте для первой ячейки зададим с помощью тега <center>, а для остальных – с помощью атрибута align.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3">
 <tr>
 <td height = "200" width = "200"><center>1 ячейка</center></td>
 <td align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td>
 <td align = "center" height = "200" width = "200">4 ячейка </td>
 </tr>
 <tr>
 <td align = "center" height = "200" width = "200" >5 ячейка </td>
 <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраняем. Проверяем. Как мы видим, разницы между двумя способами нет.

Что делать, если возникнет необходимость в том, чтобы текст в ячейке располагался сверху или снизу? Насколько вы помните, мы проходили данный атрибут. Он означает вертикальное выравнивание – vertical align. Перейдем в код, и для первых двух ячеек зададим его. Для первой становим значение top, а для второй – bottom. Насколько мы помним, существует третье значение, которое устанавливается по умолчанию – middle.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3">
 <tr>
 <td valign = "top" height = "200" width = "200"><center>1 ячейка</center></td>
 <td valign = "bottom" align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td>
 </tr>
 <tr>
 <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td>
 <td align = "center" height = "200" width = "200">4 ячейка </td>
 </tr>
 <tr>
 <td align = "center" height = "200" width = "200" >5 ячейка </td>
 <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраним и проверим. Всё получилось.

Сейчас мы немножко поиграем с нашей таблицей. Давайте изменим ее вид:  у нас пойдет первая ячейка, длиной в две ячейки, потом идет вторая ячейка, высотой в две ячейки и далее – третья и четвертая ячейки обычного размера. Это можно сделать, просто прописав код с помощью <tr> и <td>, а можно сделать это с использованием специальных атрибутов. Давайте рассмотрим это.  Растягиваются наши ячейки с помощью атрибутов colspan и rowspan. Сначала давайте удалим вторую ячейку.  Теперь вводим атрибут colspan со значением «2» в первую ячейку. Теперь удалим пятую ячейку, так как, как мы видели на примере, у нас ее не будет. Задаем атрибут rowspan третьей ячейке.

 <table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing = "0" cellpadding = "3">
 <tr>
 <td valign = "top" colspan = "2" height = "200" width = "200"><center>1 ячейка</center></td>
 </tr>
 <tr>
 <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td>
 <td align = "center" height = "200" width = "200" >4 ячейка </td>
 </tr>
 <tr>
 <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td>
 </tr>
 </table>
 

Сохраним и проверим в браузере. У нас получилось так, как мы и задумывали. Хочу заострить ваше внимание на этом пункте, поскольку это довольно важная часть в основе верстки веб-страниц. Поэтому потренируйтесь здесь, а затем нажмите «Play» для продолжения видеоурока.

Как создать вложенные таблицы в HTML?

Сейчас мы займемся такой интересной вещью, как вложенные таблицы. Давайте создадим таблицу в третьей ячейке. Таблица будет состоять из двух столбцов и трех строк, высота которых будет различной: она будет расти от первой строки к последней.

Давайте перейдем в код и найдем третью ячейку. Убираем текст и создаем новую таблицу. Прописываем в ней три строки, а в каждой строке по две ячейки. В первой ячейке будет имя, во второй – число. Например, имя – Олег,  число – 10; имя – Дима, число – 9.

 <tr>
 <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995">

 <table>
 <tr>
 <td>Имя</td>
 <td>Число</td>
 </tr>
 <tr>
 <td>Олег</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Дима</td>
 <td>9</td>
 </tr>
 </table>
 </td>
 <td align = "center" height = "200" width = "200" >4 ячейка </td>
 </tr>
 <tr>
 

Сохраним нашу работу. Посмотрим в браузере. Как мы видим, у нас появилась таблица, состоящая из двух столбцов и трех строк. Давайте ей тоже зададим рамку в 1 пиксель и высоту. Цвет рамки укажем черным.

 <tr>
 <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995">

 <table border = "1" bordercolor = "#000000">
 <tr height="10">
 <td>Имя</td>
 <td>Число</td>
 </tr>
 <tr height="30">
 <td>Олег</td>
 <td>10</td>
 </tr>
 <tr height="50">
 <td>Дима</td>
 <td>9</td>
 </tr>
 </table>
 </td>
 <td align = "center" height = "200" width = "200">4 ячейка </td>
 </tr>
 <tr>
 

Сохраним и посмотрим, что у нас получилось. Наша задача выполнена, только уберем отступы.

 <table border = "1" bordercolor = "#000000" cellspacing = "0">
 

Проверяем – расстояние между ячейками исчезло. Задача выполнена. Однако, давайте зададим другой цвет нашим ячейкам, например розовый. Зададим всей таблице. Кстати, чтобы задать цвет изображениям, мы используем атрибут background и вводим путь для изображения, если конечно оно вам нужно.

 <table bgcolor = "FF00CC" border = "1" bordercolor = "#000000">
 <tr  height="10">
 <td>Имя</td>
 <td>Число</td>
 </tr>
 <tr height="30">
 <td>Олег</td>
 <td>10</td>
 </tr>
 <tr height="50">
 <td>Дима</td>
 <td>9</td>
 </tr>
 </table>
 

Сохраним. Проверим цвет. Всё получилось.

Теперь давайте проверим нашу страничку в браузерах Internet Explorer и Opera. В браузере IE рамка у нас серого цвета, как положено, а в браузере Opera цвет рамки серым не отображается.

Давайте перейдем к домашнему заданию. Домашнее задание будет такое: вам нужно составить табличку, задать цвет каждой ячейке, ширину и высоту 200×200 пикселей, рамку 4 пикселя, убрать расстояние между ячейками, то есть поставить значение, равное нулю, отобразить текст в ячейке по центру, вертикальное выравнивание тоже сделать по центру, то есть посередине, поэкспериментировать с атрибутами colspan, rowspan и посоздавать еще свои таблицы. После этого вы можете переходить в следующий видеоурок, где мы рассмотрим создание сайта на html-таблицах.

Спасибо за внимание. До встречи в следующем видеоуроке, в котором мы рассмотрим табличную верстку сайта!

Подпишись на info-line:

Получать новые уроки на e-mail:

20 комментариев на “Как создать таблицу в HTML?”

  1. Михаил 15 ноября 2011 в 9:17 #

    Слава Богу! Олежек, дорогой, получилось =) =) =) На куролесил, конечно по -черному, ошибок куча, я вообще удивляюсь как он еще работает =) ...и снова убеждаюсь, что экспериментировать лучше по утрам, на свежую голову, потому что в конце дня, когда уже переполнен информацией, где-нибудь не там запятую поставишь и уже код не пойдет, а затем уже часами ищешь, а где же эта запятая... А попутно, можешь «натыкать» еще гору запятых, что часто случается))...Тем не менее, получилось, можете посмотреть otwet.zp.ua/AAA.html (P. S. Теперь, через несколько дней ...займусь кнопками). Благодарю сердечно за отзывчивость! Спасибо за советы, всех благ. С ув. Михаил.

  2. Михаил 16 ноября 2011 в 23:57 #

    Привет, Олег...если не секрет, на фрилансе каким видом деятельности занимались? Можно поделиться. =) Бывают свободные минуты и у меня...можно было бы что -то сделать, полезного... И что же там за фразу, такую вескую и действенную, выдал Ваш знакомый, после которой так ревностно и плодотворно продвинулось дело в изучении программирования? Надеюсь, всё было интелегентно? =-O

    • Олег Зубцов 17 ноября 2011 в 0:07 #

      У меня немного опыта работы на фрилансе в качестве фрилансера. Создал 2 интернет-магазина.

      Я же ее написал:

      «Богатым значит хочешь быть...»

      Это был поворотный момент, когда я понял, что если я ничего делать не буду, то у меня ничего и не будет :)

  3. Михаил 17 ноября 2011 в 16:35 #

    Класс)) Хотя богатство не сама цель...но, лучше быть богатым и здоровым...Я получил подобный урок, когда начал строить дом, мой бывший шеф сказал так, что если хочешь чтобы дела продвигались, то хотя бы один гвоздь в день но забей...и таким образом каждый день понемногу дела будут продвигаться...Так оно и произошло...Подобным образом когда-то ответил Н.В. Гоголь, обратившемуся к нему человеку с вопросом как ему удалось стать таким видным писателем. Гоголь ему ответил, что важно писать каждый день, хотя бы по две строчки... Человек переспросил: «А если в голову ничего не лезет?» На что писатель ответил:" Ну тогда бери и пиши две строчки: «В голову ничего не лезет.»... =) ...Все верно: «что если я ничего делать не буду, то у меня ничего и не будет»...от себя только добавлю, делать хотя бы понемногу, но каждый день...Спасибо за уроки, Олег. Вот практический результат после Ваших уроков по таблицам, (в вивере запутался))) тогда перешел в notepad, там где уроки и прописал вручную — получилось так как хотел! =) ...можете взглянуть, внизу страницы под заголовком «Книги є самим надійним засобом від стресу», проще по ссылке otwet.zp.ua/13.11.11_Church_service.html#ks Какие еще есть красивые шрифты типа Monotype corsiva? На магазины можно глянуть?

    • Олег Зубцов 17 ноября 2011 в 17:11 #

      Кроме Monotype Corsiva есть много шрифтов в свободном доступе, но вряд ли они будут у ваших пользователей.

      Стандартных шрифтов немного, вы сами можете попробовать каждый из них. Шрифты находятся в «панели управления → шрифты». Мне нравится еще шрифт Comic Sans :)

      Интернет-магазины сделаны, но находятся в закрытом состоянии. Наверное из-за кризиса, но добавление товаров дело тоже не быстрое.

  4. Михаил 17 ноября 2011 в 21:31 #

    А как он прописывается в теге, потому что смотрю в списке шрифтов он у меня есть, а прописываю в виде в браузере не отображается? =-O

  5. Михаил 17 ноября 2011 в 21:32 #

    прописываю в виде font face="Comic Sans" size="3"

  6. Михаил 17 ноября 2011 в 21:38 #

    Да, забавный =) ...уже разобрался, он у меня отображается при записи font face="Comic Sans MS" size="3" ...Олег, даешь PHP !

    • Олег Зубцов 18 ноября 2011 в 13:47 #

      Да, я забыл про MS =)

      Прописываются так, как и называются. Полное его имя: Comic Sans MS.

  7. Михаил 19 ноября 2011 в 19:16 #

    It' s very nice for you... Спасибо за Depeche_Mode_-_Personal_Jesus.mp3 ...кстати, я его искал =) а он уже в папке с уроком)). Мне еще понравились Mistral и Algerian ...но, последний англоязычн. Всех благ.Михаил.

    • Олег Зубцов 19 ноября 2011 в 22:24 #

      Это хорошо :)

      Еще раз прошу, оставлять комментарии к соответствующим видеоурокам.

  8. Константин 12 января 2013 в 21:06 #

    Олег привет!!! А когда ты выложишь все про создание интернет магазина? И вообще будет ли такой видео урок?

    • Олег Зубцов 13 января 2013 в 0:31 #

      Интернет-магазин — это обычный сайт, просто еще и магазин :)

      Возможно будут. Точно пока говорить, не осмелюсь. В ближайшем будущем — не планируется, но я записал себе в очередь.

  9. Любовь Константиновна 31 марта 2013 в 18:32 #

    Олег, спасибо Вам преогромнейшее за Ваш труд. Как просто,

    доходчиво, ясно и т. д. изложено. Вы умница и талант в преподавании. Успехов!!!

  10. Oksana 10 июля 2013 в 16:21 #

    Здравствуйте Олег. У меня вопрос по таблице . не знаю как прикрепить тут скриншоты потому как объяснить тяжеловато. ок. таблица из трех строк и трех колонок ,решила попробовать сделать так 1+2вместе под номером 1

    .3+6под номером 2

    4+7под номером 3

    8+9под номером 4 а последняя cell в одну клетку посередине -5 но почему-то первая и вторая выглядят нормально,целостно,а 3,4 пополам разделены линией яб на месте этой лии цифру бы поставила ,но как?((( чо я не так делаю

    было:

    123

    456

    789

    стало:

    112

    352

    344

    1

    2

    3

    5

    4

    • Олег Зубцов 10 июля 2013 в 23:36 #

      Здравствуйте. Все-таки попробуйте пожалуйста задать вопрос, используя скриншоты и вставку html-кода. Чуть ниже объясню как.

      Как прикрепить скриншот:

      1. Загружаете скриншот на фото-хостинг типа radikal.ru. Получаете ссылку на изображение.

      2. На моем сайте, чуть выше области комментирования, жмете кнопку «Изображение» и вводите туда эту ссылку.

      Как вставить html-код:

      1. Нажмите на кнопку «HTML» на моем сайте, чуть выше области комментирования.

      2. Добавьте код.

      3. Закройте тег, еще одним нажатием на кнопку «HTML».

  11. Мамаш 23 августа 2013 в 12:46 #

    А для чего нужен Pixie?

    • Олег Зубцов 23 августа 2013 в 13:11 #

      Для определения кода цвета. Наводите мышку на цвет, он вам показывает код этого цвета в окошке, который Вы можете скопировать для дальнейшего использования.

Оставить ответ