SlideShare une entreprise Scribd logo
1  sur  12
Таблицы в HTML 
Описание таблицы 
Описание строки 
Описание ячейки
Таблицы в HTML 
пример результат
Таблицы в HTML 
Объединение ячеек.
Таблицы в 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 
колонки
Таблицы в HTML 
Размеры таблицы 
ШИРИНА ВЫСОТА 
Могут задаваться как в пикселях, 
так и в процентах по отношению к 
ширине/высоте экрана. 
15% 
25% 
60% 
50%
Таблицы в HTML 
Использование таблицы для макетирования страницы: 
таблица это хороший и удобный инструмент для верстки страницы..
Таблицы в HTML 
АТРИБУТЫ ТЕГА <TD> и <TH>
Таблицы в 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> 
Результат: 
Формат записи:
Таблицы в 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="Энергетическая ценность продуктов питания"> 
Такое описание никак не отображается и не выводится на экран 
обычными браузерами, однако может быть использовано 
поисковыми системами, а так же речевыми браузерами.
Таблицы в HTML 
Группировка строк. 
<thead>, <tbody> и <tfoot>. Данные теги являют собой емкость для 
строк таблицы (тег <tr>) позволяя тем самым группировать и 
логически ими управлять. 
К данным тегам допускается применять атрибуты выравнивания текста в ячейках 
align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, 
делать всплывающую подсказку с помощью title, однако на практике работать во 
всех браузерах будет только align и title.
Таблицы в HTML 
Пример группировки строк: 
Основное предназначение тегов <thead>, <tbody> и <tfoot> - это 
логическая группировка строк в группы, а это в свою очередь 
облегчает работу с таблицей, например через стили или скрипты, 
теперь не нужно определять тот же стиль для каждой строчки, а 
достаточно указать его для всей группы..
Пример соединения технологии создания таблиц в 
HTML и описания стилей для групп строк в CSS

Contenu connexe

Tendances

Создание таблиц
Создание таблицСоздание таблиц
Создание таблиц
metodkopilka
 
009
009009
009
JIuc
 
электронные таблицы основные параметры электронных таблиц основные типы и ...
электронные таблицы   основные параметры электронных таблиц  основные типы и ...электронные таблицы   основные параметры электронных таблиц  основные типы и ...
электронные таблицы основные параметры электронных таблиц основные типы и ...
guest8851ad2
 
лабораторная работа №1
лабораторная работа №1лабораторная работа №1
лабораторная работа №1
cnfc
 
0010
00100010
0010
JIuc
 

Tendances (9)

Создание таблиц
Создание таблицСоздание таблиц
Создание таблиц
 
Занятие 4 Использование простых формул и функций
Занятие 4 Использование простых формул и функцийЗанятие 4 Использование простых формул и функций
Занятие 4 Использование простых формул и функций
 
Язык Html
Язык HtmlЯзык Html
Язык Html
 
Занятие 5 Форматирование ячеек и диапазонов
Занятие 5 Форматирование ячеек и диапазоновЗанятие 5 Форматирование ячеек и диапазонов
Занятие 5 Форматирование ячеек и диапазонов
 
Занятие 3 Основы ввода и вывода данных
Занятие 3 Основы ввода и вывода данныхЗанятие 3 Основы ввода и вывода данных
Занятие 3 Основы ввода и вывода данных
 
009
009009
009
 
электронные таблицы основные параметры электронных таблиц основные типы и ...
электронные таблицы   основные параметры электронных таблиц  основные типы и ...электронные таблицы   основные параметры электронных таблиц  основные типы и ...
электронные таблицы основные параметры электронных таблиц основные типы и ...
 
лабораторная работа №1
лабораторная работа №1лабораторная работа №1
лабораторная работа №1
 
0010
00100010
0010
 

En vedette

Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
ISsoft
 
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Yandex
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Css part2
Css part2Css part2
Css part2
ISsoft
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
ISsoft
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проекте
ISsoft
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
itc73
 

En vedette (20)

WordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping ToolWordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping Tool
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требований
 
Пингвины из калининграда
Пингвины из калининградаПингвины из калининграда
Пингвины из калининграда
 
Box Model
Box ModelBox Model
Box Model
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5
 
6. таблицы и другие теги html
6. таблицы и другие теги html6. таблицы и другие теги html
6. таблицы и другие теги html
 
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For YouFL Blog Con 2015: How To Find The Best WordPress Plugins For You
FL Blog Con 2015: How To Find The Best WordPress Plugins For You
 
CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)CSS Lessons Learned the Hard Way (ConvergeSE)
CSS Lessons Learned the Hard Way (ConvergeSE)
 
How Joomla Works
How Joomla WorksHow Joomla Works
How Joomla Works
 
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
 
Php Security
Php SecurityPhp Security
Php Security
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Css part2
Css part2Css part2
Css part2
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
решение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте baрешение основной проблемы Agile (scrum) проектов в контексте ba
решение основной проблемы Agile (scrum) проектов в контексте ba
 
Custom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.xCustom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.x
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проекте
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Organisation and navigation
Organisation and navigationOrganisation and navigation
Organisation and navigation
 

Similaire à Таблицы Html

Верстка_Лекция2
Верстка_Лекция2Верстка_Лекция2
Верстка_Лекция2
itc73
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
ANefyodova
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
itc73
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8
Technopark
 

Similaire à Таблицы Html (20)

Vvedenie html 3
Vvedenie html 3Vvedenie html 3
Vvedenie html 3
 
таблицы
таблицытаблицы
таблицы
 
Верстка_Лекция2
Верстка_Лекция2Верстка_Лекция2
Верстка_Лекция2
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
 
Лекция 9. Основы HTML. Часть 2.
Лекция 9. Основы HTML. Часть 2.Лекция 9. Основы HTML. Часть 2.
Лекция 9. Основы HTML. Часть 2.
 
мова Html
мова Htmlмова Html
мова Html
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
55
5555
55
 
Excel03
Excel03Excel03
Excel03
 
презентация лекция 3
презентация лекция 3презентация лекция 3
презентация лекция 3
 
презентация лекция 3 (1)
презентация лекция 3 (1)презентация лекция 3 (1)
презентация лекция 3 (1)
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
 
14.цикл из пяти уроков информатики в 8 классе табличный процессор excel
14.цикл из пяти уроков информатики в 8 классе табличный процессор excel14.цикл из пяти уроков информатики в 8 классе табличный процессор excel
14.цикл из пяти уроков информатики в 8 классе табличный процессор excel
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документ
 
лабраб 8
лабраб 8лабраб 8
лабраб 8
 
лекц14
лекц14лекц14
лекц14
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8
 

Plus de Vasya Petrov

Plus de Vasya Petrov (20)

О школе
О школеО школе
О школе
 
Настройка Apache и PHP
Настройка Apache и PHPНастройка Apache и PHP
Настройка Apache и PHP
 
Создание сайта на PHP
Создание сайта на PHPСоздание сайта на PHP
Создание сайта на PHP
 
Графика средствами PHP
Графика средствами PHPГрафика средствами PHP
Графика средствами PHP
 
Графика средствами PHP
Графика средствами PHPГрафика средствами PHP
Графика средствами PHP
 
JavaScript-библиотека
JavaScript-библиотекаJavaScript-библиотека
JavaScript-библиотека
 
Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1
 
Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1
 
Оптимизация CSS
Оптимизация CSSОптимизация CSS
Оптимизация CSS
 
633942
633942633942
633942
 
Основные теги HTML
Основные теги HTMLОсновные теги HTML
Основные теги HTML
 
Работа с текстом в HTML
Работа с текстом в HTMLРабота с текстом в HTML
Работа с текстом в HTML
 
Rabota s massivami_v_php
Rabota s massivami_v_phpRabota s massivami_v_php
Rabota s massivami_v_php
 
Rabota so strokami_v_php
Rabota so strokami_v_phpRabota so strokami_v_php
Rabota so strokami_v_php
 
Javascript
JavascriptJavascript
Javascript
 
CSS Язык описания представлений
CSS Язык описания представленийCSS Язык описания представлений
CSS Язык описания представлений
 
массивы Php
массивы Phpмассивы Php
массивы Php
 
еще JavaScript
еще JavaScriptеще JavaScript
еще JavaScript
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Html списки
Html спискиHtml списки
Html списки
 

Таблицы Html

  • 1. Таблицы в HTML Описание таблицы Описание строки Описание ячейки
  • 2. Таблицы в HTML пример результат
  • 3. Таблицы в HTML Объединение ячеек.
  • 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. Таблицы в HTML Размеры таблицы ШИРИНА ВЫСОТА Могут задаваться как в пикселях, так и в процентах по отношению к ширине/высоте экрана. 15% 25% 60% 50%
  • 6. Таблицы в HTML Использование таблицы для макетирования страницы: таблица это хороший и удобный инструмент для верстки страницы..
  • 7. Таблицы в HTML АТРИБУТЫ ТЕГА <TD> и <TH>
  • 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. Таблицы в 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 Группировка строк. <thead>, <tbody> и <tfoot>. Данные теги являют собой емкость для строк таблицы (тег <tr>) позволяя тем самым группировать и логически ими управлять. К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title.
  • 11. Таблицы в HTML Пример группировки строк: Основное предназначение тегов <thead>, <tbody> и <tfoot> - это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы..
  • 12. Пример соединения технологии создания таблиц в HTML и описания стилей для групп строк в CSS