slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1243
Теги: html, table, row, ячейка

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

basic HTML5

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

Как вы уже возможно знаете, основным тегом для построения таблиц служит тег <table></table>, это парный тег и внутрь его помещаются другие теги информация.

Следующий уровень это строчка таблицы (tablerow/ряд таблицы), как уже можно понять это тоже парный тег <tr></tr>.

И последний, но не маловажный тег ячейки, как я его называю, в переводе же tabledata/табличные данные, так же является парным <td></td> и именно внутрь этого тега помещается текст, картинки или какая другая информация.

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

 

<table border="1">
<tr>
<td>Левая верхняя ячейка</td>
<td>Правая верхняя ячейка</td>
</tr>
<tr>
<td>Левая нижняя ячейка</td>
<td>Правая нижняя ячейка</td>
</tr>
</table>

 

Пример:

Левая верхняя ячейка Правая верхняя ячейка
Левая нижняя ячейка Правая нижняя ячейка

Вроде все понятно, если нет, то вернитесь в начало статьи и перечитайте мною написанное.

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

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

У тега <td> есть для этой цели два замечательных атрибута (Перейти к статье №4. Что такое атрибуты?) colspan="" и rowspan="", которые принимаю как значение кол-во ячеек.

Теперь разберемся по порядку colspan="" говорит браузеру сколько начиная с этой ячейки, двигаясь с лева на право ячеек нужно объединить, следует убирать не нужные ячейки(теги <td></td>), чтобы таблица не рушилась и сразу же горячий пример…

 

<table border="1">
<tr>
<td colspan="2">Верхняя ячейка, состоящая из двух объединённых верхних</td>
</tr>
<tr>
<td>Левая нижняя ячейка</td>
<td>Правая нижняя ячейка</td>
</tr>
</table>

 

Пример:

Верхняя ячейка, состоящая из двух объединённых верхних
Левая нижняя ячейка Правая нижняя ячейка

Неправильный пример:

 

<table border="1">
<tr>
<td colspan="2">Верхняя ячейка, состоящая из двух объединённых верхних</td>
<td>Побочная ячейка</td>
</tr>
<tr>
<td>Левая нижняя ячейка</td>
<td>Правая нижняя ячейка</td>
</tr>
</table>

 

Верхняя ячейка, состоящая из двух объединённых верхних Побочная ячейка
Левая нижняя ячейка Правая нижняя ячейка

Атрибут rowspan="" объединяет ячейки по вертикали, не буду заставлять ждать и сразу же пример

 

<table border="1">
<tr>
<td rowspan="2">Верхняя ячейка, состоящая из двух объединённых левых</td>
<td>Правая верхняя ячейка</td>
</tr>
<tr>
<td>Правая нижняя ячейка</td>
</tr>
</table>

 

Пример:

Левая ячейка, состоящая из двух объединённых левых Правая верхняя ячейка
Правая нижняя ячейка

Здесь так же следует удалять побочные ячейки, если не хотите, чтобы ваша таблица «поехала».

Есть еще очень много различных атрибутов, но о них я не буду рассказывать вам в этой статье. Рад был поделиться знанием, следите за выпуском новых статей.

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

Авторизоваться с помощью:

     


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

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Основы HTML. Урок №1. Как создать HTML документ?

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

Теги:

html, document, file

Комментариев: 0 Подробнее
Основы HTML. Урок №2. Структура страницы.

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

Теги:

html, title, body, head

Комментариев: 0 Подробнее
Основы HTML. Урок №3. Некоторые теги тела документа.

Это третья статья, в цикле изучения основ HTML и в ней я расскажу вам о некоторых тегах, который используются в теле документа.

Теги:

html, tags, img, tag, div

Комментариев: 0 Подробнее

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.