HTML Таблицы и Атрибут Border

Если вы не указываете атрибут border, таблица будет отображаться без границ. Иногда это может быть полезно, но в большинстве случаев, мы хотим показать границы.

Чтобы отобразить таблицу с границами, используется атрибут border:

< table border=" 1" > < tr> < td> строка 1, ячейка 1< /td> < td> строка 1, ячейка 2< /td> < /tr> < /table>

 

HTML Заголовки Столбцов/Строк Таблицы

Информация о заголовках столбцов/строк в таблице указывается с помощью тега < th>.

Подавляющее большинство браузеров будут отображать текст в элементе < th> как жирный и выровненный по центру.

< table border=" 1" > < tr> < th> Заголовок 1< /th> < th> Заголовок 2< /th> < /tr> < tr> < td> строка 1, ячейка 1< /td> < td> строка 1, ячейка 2< /td> < /tr> < tr> < td> строка 2, ячейка 1< /td> < td> строка 2, ячейка 2< /td> < /tr> < /table>

Как HTML код выше выглядит в вашем браузере:

Заголовок 1	Заголовок 2
строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1	строка 2, ячейка 2

 

HTML Теги Таблиц

Тег	Описание
< table>	Определяет таблицу
< th>	Определяет заголовок колонки
< tr>	Определяет строку таблицы
< td>	Определяет ячейку таблицы
< caption>	Определяет заголовок таблицы
< colgroup>	Определяет группу колонок в таблице для форматирования
< col>	Определяет значения атрибутов для одной или более колонок в таблице
< thead>	Группирует содержимое заголовка в таблице
< tbody>	Группирует содержимое тела таблицы
< tfoot>	Группирует содержимое " подвала" таблицы

HTML Списки

Наиболее распространенные HTML списки - это упорядоченные списки и неупорядоченные списки:

HTML Списки

 

Упорядоченный список: 1. Первый элемент списка 2. Второй элемент списка 3. Третий элемент списка Неупорядоченный список: Элемент списка Элемент списка Элемент списка

HTML Неупорядоченные Списки

Неупорядоченный список начинается тегом < ul>. Каждый пункт списка начинается тегом < li>.

Эти пункты списка отмечаются маркерами bullit (как правило небольшие черные круги).

< ul> < li> Кофе< /li> < li> Молоко< /li> < /ul>

Как HTML код выше выглядит в браузере:

• Кофе
• Молоко

HTML Упорядоченные Списки

Упорядоченный список начинается с тега < ol>. Каждый пункт списка начинается тегом< li>.

Пункты списка маркеруются числами.

< ol> < li> Кофе< /li> < li> Молоко< /li> < /ol>

Как HTML код выше выглядит в браузере:

1. Кофе

2. Молоко

 

HTML Списки Определений

Список определений - это список пунктов с описанием каждого пункта.

Тег < dl> определяет список определений.

Тег < dl> используется в связке с тегом < dt> (определяет пункт списка) и < dd> (описывает пункт списка):

< dl> < dt> Кофе< /dt> < dd> - черный горячий напиток< /dd> < dt> Молоко< /dt> < dd> - белый холодный напиток< /dd> < /dl>

Как HTML код выше выглядит в браузере:

Кофе

- черный горячий напиток

Молоко

- белый холодный напиток

Основные Замечания - Полезные Советы

Совет: Внутри пункта списка вы можете вставить текст, переносы строк, изображения, ссылки другие списки и т.д.

HTML Теги Списков

Тег	Описание
< ol>	Определяет упорядоченный список
< ul>	пределяет неупорядоченный список
< li>	Определяет пункт списка
< dl>	Определяет список определений
< dt>	Определяет пункт списка определений
< dd>	Определяет описание пункта списка определений

 

Примеры

Различные типы упорядоченных списков

< html>

< body>

< h4> Пронумерованный список: < /h4>

< ol>

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный буквами: < /h4>

< ol type=" A" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный строчными буквами: < /h4>

< ol type=" a" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный римскими числами: < /h4>

< ol type=" I" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный римскими числами в нижнем регистре: < /h4>

< ol type=" i" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< /body>

< /html>

 

 

Различные типы неупорядоченных списков

< html>

< body>

< h4> Список с маркерами-кружочками: < /h4>

< ul type=" disc" >

< li> Яблоки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ul>

< h4> Список с маркерами-окружностями: < /h4>

< ul type=" circle" >

< li> Яблоки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ul>

< h4> Список с маркерами-квадратиками: < /h4>

< ul type=" square" >

< li> Яблоки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ul>

< /body>

< /html>

 

 

Вложенный список

< html>

< body>

< h4> Вложенный Список: < /h4>

< ul>

< li> Кофе< /li>

< li> Чай

< ul>

< li> Черный чай< /li>

< li> Зеленый чай< /li>

< /ul>

< /li>

< li> Молоко< /li>

< /ul>

< /body>

< /html>

 

Вложенный список 2

< html>

< body>

< h4> Вложенный Список: < /h4>

< ul>

< li> Кофе< /li>

< li> Чай

< ul>

< li> Черный чай< /li>

< li> Зеленый чай

< ul>

< li> Китай< /li>

< li> Африка< /li>

< /ul>

< /li>

< /ul>

< /li>

< li> Молоко< /li>

< /ul>

< /body>

< /html>

 

 

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

< html>

< body>

< h4> Список Определений: < /h4>

< dl>

< dt> Кофе< /dt>

< dd> Черный горячий напиток< /dd>

< dt> Молоко< /dt>

< dd> Белый холодный напиток< /dd>

< /dl>

< /body>

< /html>

 

HTML Теги Списков

Тег	Описание
< ol>	Определяет упорядоченный список
< ul>	Определяет неупорядоченный список
< li>	Определяет пункт списка
< dl>	Определяет список определений
< dt>	Определяет пункт списка определений
< dd>	Определяет описание пункта списка определений

 

ФОРМЫ

HTML Формы используются для различных форм ввода пользовательской информации.

Создание текстовых полей

< html>

< body>

< form action=" " >

Имя: < input type=" text" name=" firstname" /> < br />

Фамилия: < input type=" text" name=" lastname" />

< /form>

< p> < b> Замечание: < /b> Форма сама по себе не видима. Также отметьте, что ширина текстового поля ввода равна 20 символов по умолчанию.< /p>

< /body>

< /html>

 

Создание поля ввода пароля Как создать поле для ввода пароля.

< html>

< body>

< form action=" " >

Имя: < input type=" text" name=" user" /> < br />

Пароль: < input type=" password" name=" password" />

< /form>

< p> < b> Замечание: < /b> Символы в поле ввода пароля маскируются (отображаются как звездочки или как окружности).< /p>

< /body>

< /html>

 

HTML формы используются для передачи данных на сервер.

Форма может содержать элементы ввода: текстовые поля, флажки, переключатели, кнопки подтверждения и другие. Форма также может содержать следующие элементы: списки выбора, текстовую область, группу полей, легенду, и метки.

Тег < form> используется для создания HTML формы:

< form> . элементы ввода. < /form>

 

HTML Формы - Элемент Ввода

Наиболее важный элемент формы - элемент ввода.

Элемент ввода используется для ввода пользовательской информации.

Элемент ввода может меняться различными способами, в зависимости от атрибута type. Элемент ввода может иметь тип: текстовое поле, флажок, пароль, переключатель, кнопка подтверждения, и др.

Наиболее используемые типы ввода описаны ниже.

 

Текстовые Поля

< input type=" text" /> определяет однострочное текстовое поле ввода, в которое пользователь может вводить текстовую информацию:

< form> Имя: < input type=" text" name=" firstname" /> < br /> Фамилия: < input type=" text" name=" lastname" /> < /form>

Как HTML код выше выглядит в браузере:

Начало формы

Имя:
Фамилия:

Конец формы

Замечание: Форма сама по себе не видима. Также отметьте что ширина текстового поля по умолчанию равна 20 символов.

Поле Ввода Пароля

< input type=" password" /> определяет поле ввода пароля:

< form> Пароль: < input type=" password" name=" pwd" /> < /form>

Как HTML код выше выглядит в браузере:

Начало формы

Пароль:

Конец формы

Замечание: Символы в поле ввода пароля маскируются (отображаются как звездочки или кружочки).

 

Переключатели

< input type=" radio" /> определяет радио кнопку. Радио кнопки позволяют пользователю выбирать ТОЛЬКО ОДИН из ограниченного числа вариантов:

< form> < input type=" radio" name=" sex" value=" male" /> Мужской< br /> < input type=" radio" name=" sex" value=" female" /> Женский < /form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

Мужской
Женский

Конец формы

 

Флажки

< input type=" checkbox" /> определяет флажок. Флажки позволяют пользователю выбрать ОДНУ или БОЛЕЕ опций из ограниченного числа вариантов.

< form> < input type=" checkbox" name=" vehicle" value=" bike" /> У меня есть мотоцикл < br /> < input type=" checkbox" name=" vehicle" value=" car" /> У меня есть автомобиль < /form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

У меня есть мотоцикл
У меня есть автомобиль

Конец формы

 

⇐ Предыдущая123

Поделиться: