Если вы не указываете атрибут 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 код выше выглядит в браузере:
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, просмотров: 207.