Rambler's Top100

КАК СОЗДАТЬ ТАБЛИЦУ

Начало о таблицах

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

П/№Фамилия И. О.ВозрастОтделДолжностьОклад
1Абрамов И.П.32ПроизводственныйНачальник22000.00
2Иванов С.И29ПроизводственныйЗам.начальника19000.00
3Изотов А.И.36ПроизводственныйВедущий инженер17000.00
4Болотов И.А.27ПроизводственныйСт.инженер15000.00
5Семёнова Е.И.45ПроизводственныйИнженер14000.00
6Фисенко Л.Н.29ПроизводственныйТехник10000.00
7Гладков В.М.30ПроизводственныйТехник10000.00

Код для этой таблицы будет такой (Откроется в отдельном окне, выделите код мышкой, скопируйте и вставте в свою тестовую страницу)

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

Это простые таблицы, где все строки располагаются друг под другом и все колонки одинаковой широты, но бывают и такие таблицы как на примере ниже, здесь между ячейками с П/№ и Страна, расположены две строки, а под ячейкой Сотрудники три колонки

П/№ Сотрудники Страна Город Индекс Адрес
Фамилия Имя Возраст
1 Абрамов Иван 43 Россия Москва 115407 Коломенская наб.5
2 Изотов Андрей 32 Россия Москва 107014 Короленко 25-43
3 Семёнова Елена 29 Белорусь Минск 220010 Советская 11-25
4 Гладков Вадим 31 Россия Тверь 170001 Бакунина 38

Для такой таблицы применяются атрибуты colspan="" и rowspan="". Для ячеек слева или справа от которых располагается две или больше строки, применяется атрибут rowspan="", в коде это будет так:

<th width="32" rowspan="2" >П/№</th>

Для строки под которой расположено две и более колонок применяется атрибут colspan="", так:

<th colspan="3">Сотрудники</th>

Здесь полный код для такой таблицы

Для каждой ячейки таблицы можно задать свой фоновый цвет, а так же свой цвет бордюра, цвет и размер шрифта и другие атрибуты, но в html прописывать их не надо, для этого предназначен файл CSS

 

 

   Страницы по теме: ОСНОВЫ HTML

1. Как создать страницу HTML   2. Работа с текстом   3. Как вставлять картинки

4. Как сделать ссылки на странице   5. Как создать таблицу   6. Списки на сайте

Rambler's Top100 Яндекс цитирования