SlideShare a Scribd company logo
1 of 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

More Related Content

What's hot

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

What's hot (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
 

Viewers also liked

WordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping ToolWordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping ToolAmit Kumar Singh
 
Тестирование требований
Тестирование требованийТестирование требований
Тестирование требованийISsoft
 
Пингвины из калининграда
Пингвины из калининградаПингвины из калининграда
Пингвины из калининградаAndrew Yashenko
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Amit Kumar Singh
 
6. таблицы и другие теги html
6. таблицы и другие теги html6. таблицы и другие теги html
6. таблицы и другие теги htmlSergei Dubrov
 
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 YouAdam Soucie
 
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)Zoe Gillenwater
 
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"Yandex
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTMLAarti P
 
Css part2
Css part2Css part2
Css part2ISsoft
 
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) проектов в контексте baISsoft
 
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.xAmit Kumar Singh
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To ResponseAmit Kumar Singh
 
Bdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеBdd and dsl как способ построения коммуникации на проекте
Bdd and dsl как способ построения коммуникации на проектеISsoft
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Organisation and navigation
Organisation and navigationOrganisation and navigation
Organisation and navigationLon Barfield
 

Viewers also liked (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
 

Similar to Таблицы Html

таблицы
таблицытаблицы
таблицыsivorka
 
Верстка_Лекция2
Верстка_Лекция2Верстка_Лекция2
Верстка_Лекция2itc73
 
основы нтмл
основы нтмлосновы нтмл
основы нтмлolgaoov
 
Лекция 9. Основы HTML. Часть 2.
Лекция 9. Основы HTML. Часть 2.Лекция 9. Основы HTML. Часть 2.
Лекция 9. Основы HTML. Часть 2.Alexey Furmanov
 
презентация лекция 3
презентация лекция 3презентация лекция 3
презентация лекция 3Victor Salimgareev
 
презентация лекция 3 (1)
презентация лекция 3 (1)презентация лекция 3 (1)
презентация лекция 3 (1)Victor Salimgareev
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на htmlANefyodova
 
14.цикл из пяти уроков информатики в 8 классе табличный процессор excel
14.цикл из пяти уроков информатики в 8 классе табличный процессор excel14.цикл из пяти уроков информатики в 8 классе табличный процессор excel
14.цикл из пяти уроков информатики в 8 классе табличный процессор excelKirrrr123
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документVasya Petrov
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8Technopark
 

Similar to Таблицы 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
 

More from Vasya Petrov

Настройка Apache и PHP
Настройка Apache и PHPНастройка Apache и PHP
Настройка Apache и PHPVasya Petrov
 
Создание сайта на PHP
Создание сайта на PHPСоздание сайта на PHP
Создание сайта на PHPVasya Petrov
 
Графика средствами PHP
Графика средствами PHPГрафика средствами PHP
Графика средствами PHPVasya Petrov
 
Графика средствами PHP
Графика средствами PHPГрафика средствами PHP
Графика средствами PHPVasya Petrov
 
JavaScript-библиотека
JavaScript-библиотекаJavaScript-библиотека
JavaScript-библиотекаVasya Petrov
 
Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Vasya Petrov
 
Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Vasya Petrov
 
Оптимизация CSS
Оптимизация CSSОптимизация CSS
Оптимизация CSSVasya Petrov
 
Основные теги HTML
Основные теги HTMLОсновные теги HTML
Основные теги HTMLVasya Petrov
 
Работа с текстом в HTML
Работа с текстом в HTMLРабота с текстом в HTML
Работа с текстом в HTMLVasya Petrov
 
Rabota s massivami_v_php
Rabota s massivami_v_phpRabota s massivami_v_php
Rabota s massivami_v_phpVasya Petrov
 
Rabota so strokami_v_php
Rabota so strokami_v_phpRabota so strokami_v_php
Rabota so strokami_v_phpVasya Petrov
 
CSS Язык описания представлений
CSS Язык описания представленийCSS Язык описания представлений
CSS Язык описания представленийVasya Petrov
 
массивы Php
массивы Phpмассивы Php
массивы PhpVasya Petrov
 

More from 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