Таблицы HTML

Здравствуйте уважаемые будущие веб-мастера. Продолжим знакомство с элементами html.

В этой статье рассмотрим, как сделать таблицы html, узнаем что такое теги таблиц html и как с ними работать.

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

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

Для создания таблицы применяются теги:

<table></table>   — контейнер таблицы
<tr></tr>    — строчки таблицы
<th></th>    — столбики таблицы
<td></td>    — ячейки таблицы

Я сделаю 5 строк и 8 столбиков.

Синтаксис таблицы

Напомню, что вручную, при таких повторениях, пишется только первая пара тегов.

Всё остальное делается при помощи копирования, так что если кто ещё не научился посоветую, тренируйтесь виртуозно копировать. Пригодится.

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

Синтаксис таблицы

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

Для этого используем следующие атрибуты:

border="1"    — создаёт рамку таблицы толщиной в один пиксель
width="800"    — общая длина таблицы
align="center"    — размещает таблицу по центру страницы
cellpadding="15"    — расстояние между содержимым и рамкой
cellspacing="5"    — расстояние между ячейками

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

Синтаксис таблицы

Теперь можно смело заглянуть в браузер

Результат применения тегов и атрибутов таблицы

 Вот такая получилась таблица. В дальнейшем научимся делать всё это в цвете.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Отец провожает своего сына на курорт — тот едет впервые в жизни…Приехали с деревни на станцию на телеге, отец напутствует:
— Ну шо ж сынку…буть дуже внимательный…Там знаешь какие могут быть женщины коварные…Привезёшь домой заразу!…Заразишь свою жену…Она — меня…Я — твою мать…А ты ж знаешь свою маму — вымрет всё село!

Ссылки в HTML. < < < В раздел > > > Что такое спецсимволы html

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

24 комментария на «Таблицы HTML»

  1. stariс говорит:

    Я уж не смогу подсказать. Нужно на форумы идти и спрашивать. Может что у него в настройках есть.

  2. DARKINWORCER говорит:

    поправочка у меня не нотпад а простой блокнот там все работает а в саблайме нет вот почему незнаю

  3. DARKINWORCER говорит:

    у меня сестра есть а её муж профессиональный программист вот и купил мне sublime а код в нем я с нуля делаю

  4. stariс говорит:

    Notepad Тоже ставит, про это есть в моей статье. Я зашёл посмотрел.
    Это же тогда можно использовать этот редактор, когда код уже легко читаешь, чтоб ускорить процесс.

  5. DARKINWORCER говорит:

    sublime даже закрывающие теги сам ставит

  6. DARKINWORCER говорит:

    профессиональный редактор кода

  7. stariс говорит:

    А что такое sublime?

  8. DARKINWORCER говорит:

    в этом то вся и проблема sublime не расставляет картинки в табличку

    даже при вашем коде ничего не меняется

  9. DARKINWORCER говорит:

    эх не получилось у меня то sublime, а в нотпаде все работает

  10. stariс говорит:

    Заходи, время будет.

  11. DARKINWORCER говорит:

    Спасибо вам огромное очень помогли

  12. stariс говорит:

    Вот код. Можешь переписать в Notepad, и откроется такая картинка. Только без ошибок.
    http://trueimages.ru/img/b9/bc/93f72645.png
    Можешь свои картинки подставить.

  13. DARKINWORCER говорит:

    да да именно так мне и надо

  14. DARKINWORCER говорит:

    Мне нужно сделать табличку только в место текста должны быть картинки они свое местоположение не меняют, а мне надо сделать таблицу из 3 строчек и 2 столбцов с 6 блоками в каждом должна быть картинка

  15. stariс говорит:

    Вот смотри:

    Если нужно вставить в комментарий код примерно такой таблицы

    <table>

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

    </table>

    То записывается он так:

    &lt;table&gt;

    &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;

    &lt;/table&gt;

    Это касается только угловых скобок. Стили вставляются так как есть.

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

    Сколько мне присылали код, всегда или скобка, или кавычка пропущена, или в слове ошибка, например вместо u пишут y, и т.д.

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

  16. DARKINWORCER говорит:

    Что-то я не совсем со скобками для вставки кода разбираюсь приведите какой нибудь пример пожалуйста

  17. stariс говорит:

    Здесь тоже в &gt точки с запятой не хватает, и открывающая — &lt

  18. stariс говорит:

    Вот всё что я вижу.

  19. DARKINWORCER говорит:

    &gt div id=»sidebar»>

    </div &gt

  20. DARKINWORCER говорит:

    &lt

    &gt
    &gt

  21. DARKINWORCER говорит:

    хорошо учту

  22. stariс говорит:

    Игорёк, ещё раз прошу, вместо угловых скобок, в комментарии ставь спецсимволы: открывающая скобка — &lt;, закрывающая — &gt;. До меня твой код не доходит. Так уж WP устроен.

  23. DARKINWORCER говорит:

    я попробовал сделать таблицу с картинками вместо текста

    у меня картинки друг на друга наплывают и ничего с этим поделать не могу

    я вот так написал
    пока что

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

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