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



ЗНАЕТЕ ЛИ ВЫ?

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

Поиск

Это третий урок, посвященный 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деления.


Поделиться:


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

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