|   
 
 
 
 
 
 
   
  Поиск по сайту:
логин : пароль :  
    Напомнить пароль?    
Реклама
Популярные статьи
    Реклама
     

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

    Уроки веб-дизайна » HTML » Таблицы
     
     
     

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

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

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

    Таблица может иметь заголовок, который задается тегами <caption> и </caption>. Тег <caption> может содержать атрибут ALIGN с одним из значений top или bottom, определяющие расположение заголовка соответственно перед таблицей или после нее (по умолчанию установлено значение top). Например, <caption align="bottom">Расписание уроков</caption>.

    Каждая строка таблицы начинается с тега <tr> и заканчивается тегом </tr>. Если строка содержит заголовки столбцов таблицы, то используют теги <th> и </th>, если же данные - то <td> и </td>. Например, <th>Понедельник</th> или <td>1. Алгебра</td>. В таблице слово «Понедельник» будет выделено браузером полужирным шрифтом, а текст «1. Алгебра» отформатирован стандартным способом.

     

    Наша тестовая таблица содержит названия пяти рабочих дней недели, на каждый из которых приходится 4-5 уроков:

     

     

    <table border="1">

    <caption>Расписание уроков</caption>

    <tr>

    <th>Понедельник</th>

    <th>Вторник</th>

    <th>Среда</th>

    <th>Четверг</th>

    <th>Пятница</th>

    </tr>

    <tr>

    <td>1. Алгебра</td>

    <td>1. Всемирная история</td>

    <td>1. Зарубежная литература</td>

    <td>1. География</td>

    <td>1. Химия</td>

    </tr>

    <tr>

    <td>2. Иностранный язык</td>

    <td>2. Химия</td>

    <td>2. Геометрия</td>

    <td>2. Физическая культура</td>

    <td>2. Иностранный язык</td>

    </tr>

    <tr>

    <td>3. Физическая культура</td>

    <td>3. Алгебра</td>

    <td>3. Иностранный язык</td>

    <td>3. Физика</td>

    <td>3. Геометрия</td>

    </tr> <tr> <td>4. География</td>

    <td>4. Информатика</td>

    <td>4. Трудовое обучение</td>

    <td>4. Всемирная история</td>

    <td>4. Всемирная история</td>

    </tr>

    <tr>

    <td> 

    </td>

    <td>5. Физика</td>

    <td>5. Зарубежная литература</td>

    <td> 

    </td>

    <td>

     </td>

    </tr>

    </table>

     

     

    Результат:

     

    Расписание уроков
    Понедельник Вторник Среда Четверг Пятница
    1. Алгебра 1. Всемирная история 1. Зарубежная литература 1. География 1. Химия
    2. Иностранный язык 2. Химия 2. Геометрия 2. Физическая культура 2. Иностранный язык
    3. Физическая культура 3. Алгебра 3. Иностранный язык 3. Физика 3. Геометрия
    4. География 4. Информатика 4. Трудовое обучение 4. Всемирная история 4. Всемирная история
      5. Физика 5. Зарубежная литература    

     


    Обратите внимание, что при отсутствии данных в ячейке таблицы рамка вокруг неё отсутствует. Для того чтобы рамку было видно, можно ввести специальный код: "&nbsp;" (non-breaking space - неразрывный пробел). После этого пустая ячейка будет взята в рамку.


     
       
     
     
      Материал по теме:
     
     
     
     
     
    Сайт о животных | Отдых в Феодосии
    Копирование и распостранение материалов на другие сайты строго запрещено!
      Яндекс.Метрика