Создание собственного сайта
Каталог статей
| Главная » Статьи » Мои статьи |
Таблицы в HTML. Основные сведения. В HTML таблицы применяются не только для создания массивов данных, но и при табличной вёрстке. Такая верстка использовалась, например, для создания данного ресурса – он целиком построен на таблицах. От того, как вы научитесь пользоваться таблицами, зависит в частности, насколько эффективно вы сможете применять табличную верстку при создании собственных веб-страниц. Что такое таблицаТаблица представляет собой прямоугольный блок, состоящий из ячеек. Последние являются базовыми элементами таблицы и образуются пересечением строк и столбцов.
Строка — это горизонтальный ряд ячеек. Столбец — это вертикальная колонка ячеек. В общем, для того, чтобы создать таблицу на HTML, необходимо:
Обратите внимание, что разбивать на ячейки нужно каждую строку. Это связано с тем, что разные строки могут иметь разное количество ячеек. Как, например, в следующей таблице:
Как видите, в первой строке три ячейки; во второй и третей — по две; в четвертой — только одна. Именно поэтому в html к каждой строке нужен индивидуальный подход. Таблицу, имеющую одинаковое количество ячеек во всех своих строках, называют стандартной. Для того чтобы разместить таблицу, в HTML применяется тег <table> Табличные теги<TABLE> — контейнерный тег, определяющий начало и конец таблицы — </TABLE> В общем случае таблицы могут размещаться как внутри тела страницы — непосредственно внутри контейнера тега <body>, так и в контейнерах других тегов — например, в контейнере тега <p>. При табличной верстке тег <table> используется в коде страницы очень часто. По сути вся страница помещается в одну большу́ю таблицу, в ячейках которой находятся ме́ньшие. В ситуации, когда одна таблица находится в ячейке другой, внутреннюю таблицу называют вложенной. При создании веб-страницы вложенность может достигать 7 и более. Т.е. возникает «матрешка» из семи таблиц, вложенных по типу: одна — в ячейке другой. Тем не менее, не рекомендуется создавать ситуации со слишком большой вложенностью. Это усложняет страницу, повышает вероятность возникновения ошибок при ее открытии, а также отрицательно влияет на раскрутку. Иными словами, здесь, как и везде, следует стремиться создавать максимально простой код. На самом деле, конструкция <table> </table> еще не создает таблицу, как таковую, а только определяет ее начало и конец. Для того, чтобы таблица отобразилась в браузере, нужно построить ее до конца — т.е. обозначить строки и ячейки. Для этого и нужны следующие теги. <TR> — контейнерный тег, задающий строку в таблице — </TR> <TD> — контейнерный тег, задающий ячейку в строке таблицы — </TD> ПримерыСоздадим простейшую таблицу из трех строк и трех столбцов. Для начала зададим саму таблицу, в которой затем расположим строки. Таблица задана. Теперь расположим внутри контейнера строки с помощью тегов <tr> и </tr>. Строки готовы к тому, чтобы каждую из них разбили на ячейки. Расположим в них по три контейнера тега <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 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-ти ячеек. Сделайте это самостоятельно. Не забывайте, что незначительно различающиеся фрагменты кода проще и быстрее получать копированием. | ||||||||||||||||||||||
| Просмотров: 3009 | Комментарии: 1 | | ||||||||||||||||||||||
| Всего комментариев: 0 | |
Приветствую Вас Гость
Категории раздела | |
|---|---|
|
Вход на сайт |
|---|
Поиск |
|---|
Наш опрос |
|---|
Мини-чат |
|---|
Статистика |
|---|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |