Презентация на тему: Таблицы в HTML

Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
Таблицы в HTML
1/10
Средняя оценка: 4.5/5 (всего оценок: 50)
Код скопирован в буфер обмена
Скачать (192 Кб)
1

Первый слайд презентации: Таблицы в HTML

Описание таблицы Описание строки Описание ячейки

Изображение слайда
2

Слайд 2: Таблицы в HTML

пример результат

Изображение слайда
3

Слайд 3: Таблицы в HTML

Объединение ячеек.

Изображение слайда
4

Слайд 4: Таблицы в HTML

Объединение ячеек. <table border="1"> < tr > <td rowspan ="3" > строка1 ячейка1</ td> <td> строка1 ячейка2</ td> <td> строка1 ячейка3</ td> </ tr > < tr > <td> строка2 ячейка2</ td> <td> строка2 ячейка3</ td> </ tr > < tr > <td colspan ="2" > строка3 ячейка2</ td> </ tr > </table> Данная ячейка займет 3 строки Данная ячейка займет 2 колонки

Изображение слайда
5

Слайд 5: Таблицы в HTML

Размеры таблицы ШИРИНА ВЫСОТА Могут задаваться как в пикселях, так и в процентах по отношению к ширине/высоте экрана. 15% 25% 60% 50%

Изображение слайда
6

Слайд 6: Таблицы в HTML

Использование таблицы для макетирования страницы: таблица это хороший и удобный инструмент для верстки страницы..

Изображение слайда
7

Слайд 7: Таблицы в HTML

АТРИБУТЫ ТЕГА <TD> и <TH>

Изображение слайда
8

Слайд 8: Таблицы в HTML

Название таблицы и её описание <table border="1" width="400" cellpadding ="3" cellspacing ="0"> <caption><b> Энергетическая ценность продуктов питания:</ b></caption> < tr > < th > Продукт</ th >< th > Белки</ th >< th > Жиры</ th >< th > Углеводы</ th >< th > ккал</ th > </ tr > < tr > < th > Хлеб ржаной</ th ><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td> </ tr > < tr > < th > Молоко</ th ><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td> </ tr > < tr > < th > Картофель</ th ><td>2</td><td>0,1</td><td>19,7</td><td>83</td> </ tr > < tr > < th > Свинина</ th ><td>11,4</td><td>49,3</td><td>9</td><td>489</td> </ tr > < tr > < th > Итого:</ th ><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td> </ tr > </table> Пример: Результат: Формат записи:

Изображение слайда
9

Слайд 9: Таблицы в HTML

Название таблицы и её описание К тегу < caption > может быть применён атрибут align - выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху - top или снизу - bottom таблицы. ВНИМАНИЕ!!!!!! запись: < caption align= " left ">Текст</ caption > для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы. <table border="1" width="400" cellpadding ="3" cellspacing ="0" summary=" Энергетическая ценность продуктов питания" > Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами.

Изображение слайда
10

Последний слайд презентации: Таблицы в HTML: Таблицы в HTML

Группировка строк. < thead >, < tbody > и < tfoot >. Данные теги являют собой емкость для строк таблицы (тег < tr > ) позволяя тем самым группировать и логически ими управлять. К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title.

Изображение слайда