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 Неупорядоченные Списки

Неупорядоченный список начинается тегом <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 Формы

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 код выше будет выглядеть в браузере:

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


Дата: 2019-03-05, просмотров: 172.