Створення таблиць мовою розмітки гіпертексту html

Про матеріал

В презентації детально розглянуто наступні властивості таблиці: межа, колір межі, об'єднання клітинок таблиці, ширина клітинок, вирівнювання вмісту клітинок. Наведені детальні приклади.

Перегляд файлу

ТаблиціМова розмітки гіпертексту HTMLВчитель: Діана Воробель

Колір. Вчитель: Діана Воробель. Атрибут bgcolor може задавати колір як тла усієї таблиці, так і окремих рядків та клітинок.<table border=3><tbody bgcolor=

1 2 3 4 5 6 7 8 9" title="Колір. Вчитель: Діана Воробель. Атрибут bgcolor може задавати колір як тла усієї таблиці, так і окремих рядків та клітинок.

	1	2	3
4	5	6
7	8	9

Об'єднання клітинок. Клітинки таблиці можна об'єднувати за допомогою атрибутів rowspan та colspan , вони вказують на скільки рядків чи стовпців відповідно простягаються клітинки. Вчитель: Діана Воробель<table border=3><tbody><th><td> 1</td><td colspan=

2 4 5 6 8 9*Зверніть увагу на об'єднання клітинок: фактично об'єднання клітинок 2 та 3 означає, що клітинка 3 стає непотрібною, тож її описувати не потрібно. Аналогічно клітинки 4 та 7." title="Об'єднання клітинок. Клітинки таблиці можна об'єднувати за допомогою атрибутів rowspan та colspan , вони вказують на скільки рядків чи стовпців відповідно простягаються клітинки. Вчитель: Діана Воробель

	1	2
4	5	6
4	8	9

*Зверніть увагу на об'єднання клітинок: фактично об'єднання клітинок 2 та 3 означає, що клітинка 3 стає непотрібною, тож її описувати не потрібно. Аналогічно клітинки 4 та 7.">

Ширина. Вчитель: Діана Воробель. Ширина таблиці та її окремих клітинок визначається вмістом клітинок. Атрибут width дозволяє вказати ширину клітинки (чи таблиці) в пікселях чи у відсотках.<table border=3 width=

1 2 3 4 5 6 7 8 9*Таблиця загалом має ширину 300 пікселів, перший стовпець - 100 пікселів, а другий - 50% від загальної ширини таблиці." title="Ширина. Вчитель: Діана Воробель. Ширина таблиці та її окремих клітинок визначається вмістом клітинок. Атрибут width дозволяє вказати ширину клітинки (чи таблиці) в пікселях чи у відсотках.

	1	2	3
4	5	6
7	8	9

*Таблиця загалом має ширину 300 пікселів, перший стовпець - 100 пікселів, а другий - 50% від загальної ширини таблиці.">

Вирівнювання. Вчитель: Діана Воробель. Вміст клітинок та таблицю загалом можна вирівнювати через атрибут align (center, left, right, justify) та по вертикалі valign (top, bottom, middle).<table border=3 width=

1 2 3 4 5 6 7 8 9*У поданій таблиці другий рядок вирівняно за правим краєм, клітинки 1 та 8 - за центром. Сама таблиця теж вирівнюється за центром сторінки." title="Вирівнювання. Вчитель: Діана Воробель. Вміст клітинок та таблицю загалом можна вирівнювати через атрибут align (center, left, right, justify) та по вертикалі valign (top, bottom, middle).

	1	2	3
4	5	6
7	8	9

*У поданій таблиці другий рядок вирівняно за правим краєм, клітинки 1 та 8 - за центром. Сама таблиця теж вирівнюється за центром сторінки.">

Попередній слайд 1 / 9 Наступний слайд

Зміст слайдів

Номер слайду 1

ТаблиціМова розмітки гіпертексту HTMLВчитель: Діана Воробель

Номер слайду 2

Таблиці на веб-сторінках використовуються як з метою показу табличних даних, так і для підтримки макету сторінки. Довший час таблиці були основним засобом верстки веб-сторінок. Зараз цей спосіб здебільшого замінюється стильовим блоковим оформленням. Таблиця у коді html описується по рядках, у кожному з яких описуються стовпці, утворюючи клітинки. ТаблиціВчитель: Діана Воробель

Номер слайду 3

Таблицю охоплює тег

, рядки описує тег , а клітинки - тег

. Перший рядок таблиці може містити заголовки стовпців - це тег

. ТаблиціВчитель: Діана Воробель

Номер слайду 4

ТаблиціВчитель: Діана Воробель1 2 34 5 67 8 9

	1	2	3
4	5	6
7	8	9

Номер слайду 5

Межі таблиціЗа умовчанням таблиця не має меж. Атрибут border дозволяє вказати ширину меж клітинок. Вчитель: Діана Воробель

	1	2	3
4	5	6
7	8	9

Номер слайду 6

Колір. Вчитель: Діана Воробель. Атрибут bgcolor може задавати колір як тла усієї таблиці, так і окремих рядків та клітинок.

	1	2	3
4	5	6
7	8	9

Номер слайду 7

Об'єднання клітинок. Клітинки таблиці можна об'єднувати за допомогою атрибутів rowspan та colspan , вони вказують на скільки рядків чи стовпців відповідно простягаються клітинки. Вчитель: Діана Воробель

	1	2
4	5	6
4	8	9

*Зверніть увагу на об'єднання клітинок: фактично об'єднання клітинок 2 та 3 означає, що клітинка 3 стає непотрібною, тож її описувати не потрібно. Аналогічно клітинки 4 та 7.

Номер слайду 8

Ширина. Вчитель: Діана Воробель. Ширина таблиці та її окремих клітинок визначається вмістом клітинок. Атрибут width дозволяє вказати ширину клітинки (чи таблиці) в пікселях чи у відсотках.

	1	2	3
4	5	6
7	8	9

*Таблиця загалом має ширину 300 пікселів, перший стовпець - 100 пікселів, а другий - 50% від загальної ширини таблиці.

Номер слайду 9

Вирівнювання. Вчитель: Діана Воробель. Вміст клітинок та таблицю загалом можна вирівнювати через атрибут align (center, left, right, justify) та по вертикалі valign (top, bottom, middle).