Выпуск №5. Table — HTML тег таблицы

html таблицы

Доброго времени уважаемые подписчики!

Сегодняшний урок мы посвятим созданию таблиц в языке HTML. Таблицы в HTML создаются с помощью тега table.

В WEB таблицы — это не только какие-то отчетные данные, не только расписание или еще что-нибудь в этом стиле. В WEB таблицей можно задать целую структуру сайта.

html таблицы

Сколько вы таких страниц видели в Internet?

Тысячи и тысячи. Но если разобраться, то это вот такая таблица.

Спросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом.

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

HTML-тегом таблицы является тег table, строкой таблицы является тег tr, а столбцом таблицы — тег td.

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

Давайте рассмотрим пример, и вы сразу все поймете.

Сделаем такую таблицу:

html таблицы

Сделаем это следующим образом:

Ставим тег <table> и начинаем формировать первую строку, пишем:

<tr>
    <td>Ячейка 1 строка 1</td>
    <td>Ячейка 2 строка 1</td>
    <td>Ячейка 3 строка 1</td>
  </tr>

У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:

<tr>
   <td>Ячейка 1 строка 2</td>
  <td>Ячейка 2 строка 2</td>
  <td>Ячейка 3 строка 2</td>
  </tr>

И третью:

<tr>
   <td>Ячейка 1 строка 3</td>
    <td>Ячейка 2 строка 3</td>
	 <td>Ячейка 3 строка 3</td>
  </tr>

Наши три строки сформированы, осталось закрыть тег </table>.

Наша таблица готова.

Если таблице нужно дать заголовок, то за это отвечает тег <caption> Заголовок таблицы </caption> .

По умолчанию он располагается по центру, над таблицей. Тег заголовка таблицы необходимо размещать между тегом <table> и первым тегом <tr>.

В принципе заголовок можно сделать, поставив тег <h3> Заголовок таблицы </h3>перед тегом <table>.

Если столбцу нужно дать заголовок, то для этого предусмотрен тег <th> Заголовок столбца </th>.

Тег <th> — то же что и тэг <td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое <td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.

С тегами, касающихся таблиц, пожалуй, все.

Теперь рассмотрим параметры этих тегов.

Тег <table> имеет следующие параметры:

width=число — ширина таблицы в пикселях или в % относительно ширины окна браузера.

height=число - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left — выравнивание таблицы по левому краю.

right — выравнивание таблицы по правому краю.

center — выравнивание таблицы по центру.

border= число — толщина рамки таблицы в пикселях.

cellspacing=число - расстояние между смежными ячейками в пикселях (по умолчанию = 2).

cellpadding=число — расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).

bgcolor= цвет — фоновый цвет таблицы.

background=url - фоновое изображение для таблицы.

bordercolor=цвет - цвет всех линий рамки таблицы.

Рассмотрим параметры тегов <tr>, <td>, <th>:

width=число — ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr>не применяется).

height=число - высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).

(высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left — выравнивание в ячейке по левому краю.

right — выравнивание в ячейке по правому краю.

center — выравнивание в ячейке по центру.

valign - вертикальное выравнивание содержимого ячейки.

top - выравнивание по верхнему краю ячейки.

bottom — выравнивание по нижнему краю ячейки.

middle — выравнивание по середине ячейки.

bgcolor= цве — фоновый цвет ячейки.

background=url — фоновое изображение для ячейки.

bordercolor=цвет — цвет всех линий рамки ячейки.

colspan=число - количество объединяемых ячеек по столбцам (для <tr> не применяется).

rowspan=число- количество объединяемых ячеек по строкам (для<tr> не применяется).

Давайте подробнее остановимся на параметрах colspan и rowspan.

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

html таблицы

Для этого нам понадобятся параметры тега <td> colspan и rowspan..

Итак:

<table width="100%" border="1" cellspacing="0" cellpadding="0">

Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colspan=3.

<tr>
    <td colspan="3" align="center">1</td>
  </tr>

Вторая строка это просто три ячейки:

     <tr>
  <td align="center">2</td>
  <td align="center">3</td>
  <td align="center">4</td>
</tr>

Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую).

Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается.

  <tr>
  <td colspan="2" rowspan="2" align="center">5</td>
  <td align="center">6</td>
</tr>

Таким образом получается, что в четвертой строке должна быть одна ячейка ()

  <tr>
    <td align="center">7</td>
  </tr>
</table>

Наша таблица построена.

Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.

Поупражняться можно на примерах.

Если возникнут вопросы, пишите или скачайте файл с готовыми таблицами из упражнения.

Ссылка на файл Архив 5 урока

Упражнение:

Таблица 1.

html таблицы

Таблица 2.

html таблицы

На сегодня, выпуск посвящённый HTML-тегам таблицы, я заканчиваю.

Если есть вопросы пишите на E-mail: contact@webformyself.com

Проект webformyself.com — основы самостоятельного сайтостроения

С уважением, Андрей Бернацкий.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (47)

  1. Yasam

    Андрей, просто огромное спасибо тебе за хорошие и доступные уроки.Мною скачано несколько гигабайт хорошей информации
    по WEB,но начать создание сайта я решил с Вами.Спасибо.Поехали дальше.

  2. elena

    Доброго времени, Андрей. У меня маленький и глупый вопрос — выполнять упражнения и тренироваться надо непременно в инете? Как -то не очень хочеться выставлять на всеобщее обозрение свою глупость и непонимание. Я еще не совсем освоилась с простым инетом и тренироваться в построении сайта хотелось бы гдето в стороночке. Открою Вам маленький секрет: мне нужен собственный сайт исключительно для работы (я занимаюсь написанием контрольных, курсовых, дипломов и т.п. для студентов). Все фирмы, которые занимаются данным видом работ меня не устраивают по разным причинам — да и обманов в смысле оплаты слишком много, да и качество представленных работ, которые я просматривала, мягко говоря, оставляют желать лучшего. Вот такие пироги. С уважением и пожеланием всего наилучшего, Елена Владиславовна.

    • Владимир.

      Здравствуйте Елена Владиславовна. Меня зовут Владимир. Прочитал Ваш отзыв и хочу помочь Вам. Я имею ввиду про собственный сайт. Если интересно пишите ISQ 430345772 или BIZNESSITI@yandex.ru С уважением Владимир.

    • Евгений

      Елена, здравствуйте.
      Если Ваш вопрос про выполнение упражнений в инете все еще актуален — отвечаю. Выполнять все упражнения можно в оффлайне: достаточно в блокноте написать код, присвоить файлу имя с расширением .html, сохранить и потом открыть этот файл браузером.

    • Андрей

      Елена, есть хороший инструмент веб-разработчика, как виртуальный веб-сервер, который устанавливается на локальный комп. И на нем можно тренироваться сколько угодно, никто его не увидит, кроме Вас… называется он Денвер. А найти его и скачать, я думаю, вы сможете.:) Удачи.

  3. Артем

    Добой ночи!

    У меня возникла вопрос с таблицами, пока что нигде не нашел ответ, может Вы сможете помочь. Можно ли каким-нибудь образом, задать нулевое расстояние между ячейками в строке, но сделать некоторый отступ между строками таблицы. Перепробовал множество комбинаций параметров таблицы и разные css, но всегда расстояние между ячейками задается во всех направлениях сразу.

    Заранее благодарю за помощь!

  4. Александр

    Огромное спасибо за простой и доступный материал, однако в ФайерФоксе не сработали collstrong и rowstrong, пришлось менять на colspan и rowspan. Подскажите, Андрей, какая может быть причина, остальное работает хорошо!

  5. Елена

    Андрей Спасибо большое! Таблицы HTML получились!!! Все получилось благодаря прекрасно выстроенному логически тексту этого урока! СПАСИБО!!!

  6. Мария

    Спасибо!

  7. Сергей

    Интересный урок. Спасибо

  8. Любовь

    Хорошо! Изложено хорошо! Я довольна, что случайно вышла на Ваш сайт.

  9. Евгений

    Спасибо! Не сразу всё понятно (в частности почему ячейки выстраиваются именно так), но может это я туплю немного :-)

  10. Loshu

    Отличный курс! Хоть сайт свой до ума доведу. Спасибо!

  11. Lena

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

    • Александр Войша

      +1
      насколько мне известно сейчас сайты сверстанные на таблицах считаются отстоем

      • Сергей

        Так оно и есть: table-отстой div-рулит. Однако для отображения на страницах сайтов табличной информации лучше талиц ничего нет. Сейчас все делают вёрстку на дивах (блоках), но таблицы забывать не стоит, иногда выручают.

  12. Анна

    спасибо) все получилось :)

  13. Сергей

    делать структуру сайта таблицами — каменный век
    Зачем учить новичков неправильному подходу?
    Структура задается только и только элементами DIV, а TABLE следует использовать исключительно для верстки табличных данных

    • Юрий

      Сергей, Вы максималист! любое творчество не терпит догм. заявления типа — «Структура задается только и только элементами DIV» напоминает мне время, когда думать надо было так!, только так!! всем только так!!! а я вот не очень люблю делать сайты на div-ах. они очень часто работают не коректно. совсем не так как от них ожидается и часто уйму времени тратишь на то чтобы понять что этому div-у не нравится. а старые добрые таблицы всегда понятны, просты как самокат, всеми браузерами понимаемы одинаково. Да код более длинный. но если: 1) знаешь что ты пишешь, а не утянул код из инета и 2) аккуратно написал код с нужными отступами в нужных местах, то разбираться в нем и не потребуется. все прекрасно видно. так что дамы и господа! мальчики и девочки! надо знать разные приемы, но делать так как подсказывает Вам Ваше чутье!!! в творчестве НЕТ обязательных путей. в любом языке есть набор слов которые надо знать. а мысли которые вы этими словами выскажете должны быть Вашими собственными. язык HTML не исключение. Всем успехов в ТВОРЧЕСТВЕ.

  14. Евгений Пархоменко

    Андрей, Вы правильно строите уроки. Не слушайте тех, кто считает таблицы прошлым веком. Это основы, для сайтостроения азы знать просто необходимо.

  15. avverok

    Согласен на 100% Азы знать просто необходима, а «умные» пусть сначала сами что-то сделают (вроде этого сайта), а потом дают свои «советы»(на своих сайтах)

  16. Иммагинатор

    Спасибо,очень познавательно!

  17. Tanuxa

    Спасибо, за урок!!! Делать таблицы очень интересно, сначала я всё время путалась с параметрами COLSPAN и ROWSPAN, а хорошенько разобравшись, две последние таблицы (домашнее задание) делала с удовольствием.

  18. Мархабо

    Андрей, ответьте пожалуйста хоть на один мой вопрос!Почему вы тогда пишите,что готовы ответить на любой?

  19. Алексей

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

  20. Татьяна

    Андрей, спасибо за уроки.
    Уже и не помню по какой ссылке нашла их, но рада и счастлива!
    Одна досада, с видеорядом скачался только первый урок, остальные по паре картинок и все!
    Хотя я думала, что ссылка «Архив урока» предусматривает скачивание всего урока. Да и смотреть с компьютера приятнее. Не подтормаживает.
    Это так задумано или я что-то не так делаю?

    • Andrey Bernacki

      Все вы правильно делаете. В архиве просто рабочие файлы урока. В уроках, в которых есть видео будет написано «Скачать видео» или что-то подобное…

  21. Ольга

    Классно!! Было интересно построить таблички из примеров. Всё получилось!

  22. Goga

    Это все хорошо что так написано!
    Из всего сказанного только не понятен один вопрос как сделать ,что бы при копировании всего кода таблицы для создания однотипных страниц ,таблицы не сдвигались по экрану(вверх,вниз,вправо и влево)?

  23. nikolay

    Спасибо. Начинаю вникать.

  24. Людмила

    здравствуйте :)
    небольшой комментарий по поводу параметра width.
    мне кажется, что уместно уточнить, что он задает не столько ширину таблицы, сколько ширину ее содержимого…
    и когда позже новички будут задавать отступы, например, внутри ячеек, это знание им пригодиться для задания нужного значения этого параметра :)
    =======================================================
    я сама только недавно занялась веб-кодингом, и этот нюанс немало времени лишнего отнял, пока меня не осенило ))

    • Andrey Bernacki

      Совершенно верно, ширина складывается из самой заданной ширины, внутренних отступов (padding) и границы (border).
      То есть если у вас для блока задано: width:100px; padding-right:20px; padding-left:20px; border:5px; то ширина, которую займет блок будет равна 150px (100+20+20+5+5(по 5px граница будет слева и справа)). Соответственно, если нужно чтобы блок занимал все-так 100px по ширине, то в данном случае нужно будет указать width:50px.
      Ну это так на будущее. К уроку это мало отношения имеет….

  25. Людмила

    и еще :)
    отдельное спасибо за наличие бесплатных уроков !
    кроме этой рассылки начала просматривать видео, созданное Вами совместно с Никитой Королевым.
    из 2х просмотренных уроков немало подчерпнула полезного )
    …HTML & CSS я осваивала на других ресурсах (и процесс освоения продолжается), а вот в области верстки пока много пробелов, которые начали потихоньку заполняться именно после Ваших видеоуроков на эту тему :)

  26. Людмила

    Андрей, большое тебе спасибо за интересные уроки! Я справилась с заданием, первую html-таблицу я сделала достаточно быстро, а вот со второй пришлось повозиться! Но я очень довольна, что у меня всё получилось!!!

  27. Станислав

    Андрей! Спасибо за урок.

  28. Елена

    Большое спасибо за урок!

    Я умею делать таблицы в HTML, но только сейчас, выполняя задания, полностью поняла, как объединять ячейки, используя colspan и rowspan. До этого я делала это наугад, по шаблону. :)

  29. Диана

    Упражнения получились, но есть вопрос: как сделать пробел между таблицами по высоте?

  30. Максим

    А что значит вот это? «bgcolor= цве – фоновый цвет ячейки.»

  31. Роза

    Таблицы получились. Всё изложено понятно. Спасибо за уроки.

  32. Тагир

    Огромное спасибо за доступный урок. Все замечательно и вовремя. Мне повезло, что во время создания своего сайта, после прекрасных уроков в школе Start-Up Гаврилова Михаила и Евгения Ходченкова я получил Вашу информацию. Просто удивительно ,что в наше сегодня есть такие ребята , которые вот так легко делятся своими знаниями. Благодарю Вас. С уважением, Тагир Котамов.

  33. Артём Хусаинов

    Не плохие уроки!
    Даже если сейчас практически не приходится пользоваться кодом в чистом виде.
    Всё доступно и полезно для общего образования.

  34. Любовь

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

  35. Баночкин Сергей

    В тексте урока я заметил две ошибки, если я подскажу вы не обидетесь?
    1) bgcolor= цве – фоновый цвет ячейки. (нехватает буковки «т»)
    2) таблицу подобную на эту? (лучше — «подобную этой?» -, или — «похожую на эту?»)
    Я бы некоторые ячейки не делал в одной таблице, а поставил в большую ячейку, таблицу с маленькими ячейками.
    Я бы вам тут нарисовал бы, если бы позволяло это текстовое поле…
    = Баночкин С. =

  36. Рамазан

    Я профессиональный web-дизайнер, сам занимаюсь проведением оффлайн уроков, зашел сюда набраться опыта в правильной организации процесса обучения. И остался приятно удивлен, вы сумели завоевать весьма широкую публику. Попробую сделать тоже самое у себя в kaz-нете.

  37. oleg

    Доброе время суток!Всё конечно здорово и конкретно разжевано,но мне непонятен вот этот тег в описании:»укажем параметр colstrong=3″,с какого он перепуга здесь?Может это неточность с недогляду?

    • Андрей Кудлай

      Здравствуйте, Олег.
      Конечно же, это банальная опечатка. Уже поправили, спасибо :)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree