Рабочие листы
к вашим урокам
Скачать
1 слайд
Таблицы
В создании презентации использованы контент сайта puzzleweb.ru
2 слайд
HTML: Создание таблицы
Таблица - набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.
Для создания таблицы в HTML-документе используется тег <table>, он представляет собой контейнер, в котором находится все содержимое таблицы.
3 слайд
HTML: Создание таблицы
Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.
В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. Второй вид - это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным начертанием и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.
4 слайд
<html>
<body>
<table border="1">
<tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
<tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
<tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>
</body>
</html>
5 слайд
Рамка таблицы
Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы. По умолчанию браузеры не отображают рамку вокруг таблицы и ячеек, но присутствие атрибута border, указывает браузеру, что у таблицы должна быть рамка.
По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек ""). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться:
6 слайд
<html>
<body>
<h4>Таблица с рамкой:</h4>
<table border="1">
<tr><td>Первая</td><td>строка</td></tr>
<tr><td>Вторая</td><td>строка</td></tr>
</table>
7 слайд
<h4>Таблица без рамки:</h4>
<table>
<tr><td>Первая</td><td>строка</td></tr>
<tr><td>Вторая</td><td>строка</td></tr>
</table>
</body>
</html>
8 слайд
Заголовок таблицы
У каждой таблицы обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами <tr>.
Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side:
9 слайд
<html>
<body>
<table border="1">
<caption>Моя первая таблица</caption>
<tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
<tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>
</body>
</html>
10 слайд
HTML: Объединение ячеек в таблице
Смежные ячейки в таблице могут объединяться с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов.
Для объединения смежных ячеек в строке таблицы используется атрибут colspan, в значении задается число ячеек в строке, которое вы хотите объединить.
Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить:
11 слайд
<html>
<body>
<h4>Объединим две ячейки в строке таблицы:</h4>
<table border="1">
<tr>
<th>Имя</th><th colspan="2">Телефон</th>
</tr>
<tr>
<td>Петя Иванов</td><td>123 45 67</td><td>234 56 78</td>
</tr>
</table>
12 слайд
<h4>Объединим две ячейки в столбце таблицы:</h4>
<table border="1">
<tr>
<th>Имя</th><td>Петя Иванов</td>
</tr>
<tr>
<th rowspan="2">Телефон</th><td>123 45 67</td>
</tr>
<tr><td>234 56 78</td></tr>
</table>
</body>
</html>
Рабочие листы
к вашим урокам
Скачать
6 662 993 материала в базе
Настоящий материал опубликован пользователем Шайхетдинов Вадим Шамситдинович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36 ч. — 144 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
3 ч.
Мини-курс
3 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.