Урок №7. Таблицы HTML.

Содержание урока:

Создание таблицы.
Оформление таблицы.


 

Создание таблицы.

Таблица – один из основных элементов HTML. На базе таблиц можно создавать сайты сложной структуры без участия CSS.

Рассмотрим основные теги для создания таблицы:

<table></table> — собственно сама таблица. Данный тег обозначает начало и конец Вашей таблицы.

<caption></caption> — как известно каждому человеку, у каждой таблицы должно быть свое название. Данный тег создает название таблицы.

<tr></tr> — Создает строки таблицы.

<td></td> — создает столбцы таблицы.

<th></th> -создает название каждого столбца таблицы.

Смотрите на примере:

<!doctype html>

   <html>

     <head>

       <title>Пример</title>

     </head>

     <body>

       <table>

         <caption>Пример таблицы</caption>

         <tr><th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th></tr>

         <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>

     </body>

   </html>

 

Вид в браузере:

Пример таблицы
Столбец 1Столбец 2Столбец 3
№1.1№2.1№3.1
№1.2№2.2№3.2
№1.3№2.3№3.3

Ну что, как вам вид? Не очень, правда? Переходим к оформлению таблицы.

 


 

Оформление таблицы.

Для хорошо оформленной таблицы нужно запомнить несколько полезных тегов:

    width — задает ширину таблицы (в пикселах или % от ширины экрана).

    bgcolor — задает цвет фона ячеек таблицы.

    background — заливает фон таблицы рисунком.

    border — задает рамку указанной ширины (в пикселах) вокруг всей таблицы.

    cellpadding — задает отступ в пикселях между границей клетки и ее содержимым.

Посмотрим, что будет, если задействовать данные параметры.

Пример:

<!doctype html>

   <html>

     <head>

       <title>Пример</title>

     </head>

     <body>

       <table width="250" bgcolor="violet" border="2">

         <caption>Пример таблицы</caption>

         <tr><th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th></tr>

         <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>

     </body>

   </html>

 

Вид в браузере:

 

Пример таблицы
Столбец 1Столбец 2Столбец 3
№1.1№2.1№3.1
№1.2№2.2№3.2
№1.3№2.3№3.3

Лучше будет. Но таблица очень некрасиво разместилась слева. Исправим это.

Добавим еще три атрибута:

    align — задает выравнивание таблицы: слева (right), справа (left), по центру (center).

    cellspacing — задает расстояние между ячейками таблицы (в пикселах).

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

Пример:

<!doctype html>

   <html>

     <head>

       <title>Пример</title>

     </head>

     <body>

       <table width="250" bgcolor="violet" border="2"
        align="center" cellspacing="4" cellpadding="8">

         <caption>Пример таблицы</caption>

         <tr><th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th></tr>

         <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>

     </body>

   </html>

 

Вид в браузере:

 

Пример таблицы с атрибутами cellspacing и cellpadding

Границы таблицы имеют объем, что бы сделать их обычными линиями просто замените значение cellspacing="4" на нулевое (cellspacing="0")

За отображение границ отвечают два атрибута, рассмотрим их подробней.

Первый атрибут frame – задает вид рамки вокруг таблицы.

    Возможно значения:

        void — рамки нет.

        above — только верхняя рамка.

        below — только нижняя рамка.

        hsides — только верхняя и нижняя рамки.

        vsides — только левая и правая рамки.

        lhs — только левая рамка.

        rhs — только правая рамка.

        box — все четыре части рамки.

Второй атрибут rules – управляет видом внутренних границ таблицы.

    Возможно значения:

        none — между ячейками нет границ.

        groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже).

        rows — границы только между строками.

        cols — границы только между стобцами.

        all — отображать все границы.

Пример:

<!doctype html>

   <html>

     <head>

       <title>Пример</title>

     </head>

     <body>

       <table width="250" bgcolor="violet" border="2"
        align="center" cellspacing="4" cellpadding="8"
        rules="cols" frame="hsides">

         <caption>Пример таблицы</caption>

         <tr><th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th></tr>

         <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>

     </body>

   </html>

 

Вид в браузере:

 

Пример таблицы с атрибутами frame и rules

 

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

До встречи на следующем уроке.

Закрыть меню