![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Примеры
Рассмотрим вышеизложенное на примерах различного вида таблиц. < html> < body>
< p> Каждая таблица начинается с тега table. Каждая строка таблицы начинается с тега tr. Каждый элемент данных таблицы начинается с тега td. < /p>
< h1> Это пример простейшей таблицы, содержащей одну строку и одну ячейку.< /h1> < table border=" 1" > < tr> < td> Одна строка и одна ячейка< /td> < /tr> < /table>
< h1> Одна строка и три столбца: < /h1> < table border=" 1" > < tr> < td> столбец 1< /td> < td> столбец 2< /td> < td> столбец 3< /td> < /tr> < /table>
< h1> Две строки и три столбца: < /h1> < table border=" 1" > < tr> < td> 1.1< /td> < td> 1.2< /td> < td> 1.3< /td> < /tr> < tr> < td> 2.1< /td> < td> 2.2< /td> < td> 2.3< /td> < /tr> < /table>
< h1> Рамка таблицы< /h1>
< h1> Обычная рамка: < /h1> < table border=" 1" > < tr> < td> Первая< /td> < td> строка< /td> < /tr> < tr> < td> Вторая < /td> < td> строка< /td> < /tr> < /table>
< h1> Толстая рамка: < /h1> < table border=" 10" > < tr> < td> Первая< /td> < td> строка< /td> < /tr> < tr> < td> Вторая < /td> < td> строка< /td> < /tr> < /table>
< table border=" 1" > < tr> < td> строка 1, ячейка 1< /td> < td> строка 1, ячейка 2< /td> < /tr> < tr> < td> строка 2, ячейка 1< /td> < td> строка 2, ячейка 2< /td> < /tr> < /table> < /body> < /html>
Для тега table определены следующие атрибуты.
Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел & nbsp; Такие элементы как < thead>, < tbody> и < tfoot> используются редко в связи с тем, что не все браузеры их поддерживают. Для тегов < td> и < th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере. < html> < body>
< h4> Правильное применение colspan: < /h4> < table border=" 1" > < tr> < td colspan=" 2" > 100< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table>
< h4> Неправильное применение colspan: < /h4> < table border=" 1" > < tr> < td colspan=" 2" > 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table>
< h4> Правильное применение rowspan: < /h4> < table border=" 1" > < tr> < td rowspan=" 2" > 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 500< /td> < td> 600< /td> < /tr> < /table>
< h4> Неправильное применение rowspan: < /h4> < table border=" 1" > < tr> < td rowspan=" 2" > 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < /body> < /html>
|