Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Горизонтальное и вертикальное объединение ячеек

↑
▷ Содержание
⇐ ПредыдущаяСтр 6 из 9Следующая ⇒
Поиск

Это третий урок, посвященный HTML таблицам. Представление данных — основная функция таблиц в HTML, также некоторыми web-разработчиками они используются для верстки, что не является оптимальным вариантом построения каркаса сайта, но об этом позже, а сейчас познакомимся со свойствами ячеек таблицы.

  1. Объединение ячеек по горизонтали
  2. Объединение ячеек по вертикали

Объединение ячеек по горизонтали

Пример:

<html> <head> <title>Объединение ячеек таблицы по горизонтали</title> </head> <body> <table border="1" cellpadding="10" cellspacing="0"> <tr> <th>Имя</th> <th colspan="2">Телефон</th> </tr> <tr> <td>Вася</td> <td>777 88 999</td> <td>777 77 999</td> </tr> </table>

В первом ряду, в отличае от второго, всего две ячейки, но тег <th> второй ячейки, первого ряда содержит атрибут colspan="", значение которого равно 2, что, в свою очередь, компенсирует отсутствие третьей ячейки. Цифра 2 означает, что одна ячейка по размеру равна двум.

Результат:

Имя Телефон
Вася 777 88 999 777 77 999

Объединение ячеек по вертикали

Пример:

<html> <head> <title>Объединение ячеек таблицы по вертикали</title> </head> <body> <table border="1" cellpadding="20" cellspacing="0"> <tr> <td>Имя:</td> <td>Ирина</td> </tr> <tr> <td rowspan="2">Телефон:</td> <td>333 22 555</td> </tr> <tr> <td>444 11 777</td> </tr> </table>

Результат:

Имя: Ирина
Телефон: 333 22 555
444 11 777

Атрибуты и значения

  • colspan="" – определяет объединение ячеек по горизонтали.
  • rowspan="" – определяет объединение ячеек по вертикали.

Значения этих атрибутов определяют количество ячеек, которые будут объединены в одну.

HTML теги, определяющие HTML списки

Не стоит пренебрегать HTML списками. Умелое использование списков позволяет украсить дизайн любой web-страницы. Также их применение приветствуется поисковыми системами.

Процесс оптимизации сайтов для поисковиков (SEO) является неотъемлемой частью сайтостроения. Поисковой оптимизацией вам нужно будет заняться тогда, когда вы определитесь с тематикой вашего будущего сайта и займетесь непосредственно наполнением его контентом, но сначала как следует изучите HTML и CSS! В нашем деле последовательность имеет большое значение!

  1. Ненумерованные HTML списки
  2. Нумерованные HTML списки
  3. HTML списки определений

Ненумерованные HTML списки

Пример:

<title>Ненумерованные HTML списки</title> </head> <body> <ul> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ul> </body> </html>

Результат:

Теги

  • <ul> </ul> – определяют неупорядоченные – ненумерованные HTML списки.
  • <li> </li> – определяют элементы (пункты) HTML списков.

Определяем тип маркера для элементов ненумерованного HTML списка:

<title>Ненумерованные HTML списки</title> </head> <body> <ul type="square"> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ul> </body> </html>

Результат:

Атрибуты и значения

  • type="" – сообщает браузеру, что будет определен маркер для элементов HTML списка.
  • Значение square – определяет тип маркера HTML списка: закрашенный квадратик.

Определяем тип маркера для элементов ненумерованного списка:

<title>Ненумерованные HTML списки</title> </head> <body> <ul type="circle"> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ul> </body> </html>

Результат:

Нумерованные HTML списки

Пример:

<title>Нумерованные HTML списки</title> </head> <body> <ol> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ol>

Теги <ol> </ol> определяют нумерованные HTML списки.

Результат:

Пример 2:

<title>Нумерованные HTML списки</title> </head> <body> <ol type="A"> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ol>

type="A" определяет в качестве маркера нумерованного HTML списка большие буквы.

Результат:

Пример 3:

<title>Нумерованные HTML списки</title> </head> <body> <ol type="a"> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ol>

type="а" определяет в качестве маркера нумерованного HTML списка маленькие буквы.

Результат:

Пример с атрибутом start:

<title>Нумерованные HTML списки</title> </head> <body> <ol start="3"> <li>Sony</li> <li>Asus</li> <li>Dell</li> </ol>

Результат:

Атрибут start="" определяет первый символ первого пункта нумерованного HTML списка.

HTML списки определений

Пример:

<title>HTML списки определений</title> </head> <body> <dl> <dt>HTML</dt> <dd>Гипертекстовый язык разметки</dd> <dt>CSS</dt> <dd>Каскадные таблицы стилей</dd> </dl>

Результат:

Рассмотрим теги

  • <dl> </dl> – определяют HTML списки определений.
  • <dt> </dt> – определяют определяемые термины.
  • <dd> </dd> – определяют опрeделения.

⇐ Предыдущая123456789Следующая ⇒

Поделиться:


Познавательные статьи:


Техника нижней прямой подачи мяча
Комплекс физических упражнений для развития мышц плечевого пояса
Стандарт Порядок надевания противочумного костюма
Общеразвивающие упражнения без предметов


Последнее изменение этой страницы: 2016-08-01; просмотров: 437; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.122.20 (0.008 с.)