Создание собственного сайта

Каталог статей

Главная » Статьи » Мои статьи

Таблицы в HTML. Основные сведения.

Таблицы в HTML. Основные сведения.



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


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

Что такое таблица

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



Строка — это горизонтальный ряд ячеек.


Столбец — это вертикальная колонка ячеек.

В общем, для того, чтобы создать таблицу на HTML, необходимо:



  • Задать начало и конец таблицы

  • Разбить таблицу на строки

  • Разбить каждую строку на ячейки


Обратите внимание, что разбивать на ячейки нужно каждую строку. Это связано с тем, что разные строки могут иметь разное количество ячеек. Как, например, в следующей таблице:
Первая ячейкаВторая ячейкаТретья ячейка
Четвертая ячейкаПятая ячейка
Шестая ячейкаСедьмая ячейка
Восьмая ячейка



Как видите, в первой строке три ячейки; во второй и третей — по две; в четвертой — только одна. Именно поэтому в html к каждой строке нужен индивидуальный подход. Таблицу, имеющую одинаковое количество ячеек во всех своих строках, называют стандартной. Для того чтобы разместить таблицу, в HTML применяется тег <table>

Табличные теги

<TABLE> — контейнерный  тег, определяющий начало и конец таблицы — </TABLE>



В общем случае таблицы могут размещаться как внутри тела страницы — непосредственно внутри контейнера тега <body>, так и в контейнерах других тегов — например, в контейнере тега <p>.

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



В ситуации, когда одна таблица находится в ячейке другой, внутреннюю таблицу называют вложенной. При создании веб-страницы вложенность может достигать 7 и более. Т.е. возникает «матрешка» из семи таблиц, вложенных по типу: одна — в ячейке другой.



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



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



<TR> — контейнерный тег, задающий строку в таблице — </TR>



<TD> — контейнерный тег, задающий ячейку в строке таблицы — </TD>



Примеры



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




<table>

Здесь расположим строки таблицы

</table>



Таблица задана. Теперь расположим внутри контейнера строки с помощью тегов <tr> и </tr>.




<table>

  <tr>Здесь расположим ячейки первой строки</tr>

  <tr>Здесь расположим ячейки второй строки</tr>

  <tr>Здесь расположим ячейки третьей строки</tr>

</table>


Строки готовы к тому, чтобы каждую из них разбили на ячейки. Расположим в них по три контейнера тега <td> для того, чтобы задать по три ячейки внутри каждой строки.
<table> 

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

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

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

</table>

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


<table>

  <tr>   <td>Первая ячейка        </td>    <td>Вторая ячейка   </td>    <td>Третья ячейка   </td>   </tr>

  <tr>   <td>Четвертая ячейка</td>    <td>Пятая ячейка    </td>    <td>Шестая ячейка  </td>   </tr>

  <tr>   <td>Седьмая ячейка      </td>    <td>Восьмая ячейка </td>    <td>Девятая ячейка</td>   </tr>

</table>



Если теперь вы попробуете загрузить получившийся код в браузер то увидите что-то подобное:



Первая ячейкаВторая ячейкаТретья ячейка
Четвертая ячейкаПятая ячейкаШестая ячейка
Седьмая ячейкаВосьмая ячейкаДевятая ячейка




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


<table border="1" rules="all" cellpadding="10"> 

  <tr>   <td>Первая ячейка        </td>    <td>Вторая ячейка   </td>    <td>Третья ячейка   </td>   </tr>

  <tr>   <td>Четвертая ячейка</td>    <td>Пятая ячейка    </td>    <td>Шестая ячейка  </td>   </tr>

  <tr>   <td>Седьмая ячейка      </td>    <td>Восьмая ячейка </td>    <td>Девятая ячейка</td>   </tr>

</table>




Вот теперь ваша табличка один-в-один должна быть похожа на ту, что показана на рис. выше.

Вследствие того, что браузер игнорирует переносы сторк, приведенный выше код можно записать и другим образом:


<table border="1" rules="all" cellpadding="10">

  <tr>

  <td>Первая ячейка</td> <td>Вторая ячейка</td> <td>Третья ячейка</td>

  </tr>


  <tr>

  <td>Четвертая ячейка</td> <td>Пятая ячейка</td> <td>Шестая ячейка</td>

  </tr>


  <tr>

  <td>Седьмая ячейка</td> <td>Восьмая ячейка</td> <td>Девятая ячейка</td>

  </tr>

</table>

А также и таким способом, когда каждая ячейка начинается с новой строки:


<table border="1" rules="all" cellpadding="10">

  <tr>

    <td>Первая ячейка</td>

    <td>Вторая ячейка</td>

    <td>Третья ячейка</td>

  </tr>


  <tr>

    <td>Четвертая ячейка</td>

    <td>Пятая ячейка</td>

    <td>Шестая ячейка</td>

  </tr>


  <tr>

    <td>Седьмая ячейка</td>

    <td>Восьмая ячейка</td>

    <td>Девятая ячейка</td>

  </tr>

</table>

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

Еще один пример. Создадим «таблицу», состоящую только из одной ячейки. Код для нее будет выглядеть так:


<table border="1" rules="all" cellpadding="10">

  <tr>

    <td>Единственная ячейка</td>

  </tr>

</table>



И последний пример, а вернее – задание. Нужно создать таблицу 5 на 5 – из 25-ти ячеек. Сделайте это самостоятельно. Не забывайте, что незначительно различающиеся фрагменты кода проще и быстрее получать копированием
Категория: Мои статьи | Добавил: kraysler (14.12.2011)
Просмотров: 3078 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Четверг, 12.12.2024, 17:15
Приветствую Вас Гость

Категории раздела

Мои статьи [32]

Вход на сайт

Поиск

Наш опрос

Оцените мой сайт
Всего ответов: 42

Мини-чат

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0