Таблицы в HTML

Таблицы в HTML

14 авг. 2017

Таблицы необходимы для выделения однородной информации: текстовой, числовой, графической. С помощью таблиц эта информация становится более читабельной. Поэтому мы просто обязаны научиться добавлять таблицы в html. При добавлении таблиц используются только парные теги, такие как:

<table> </table>- Указывает браузеру начало и конец таблицы
<tr> </tr> - Сокращение от "table row" , т.е. табличный ряд. Табличный ряд может содержать любое число ячеек

Таблицы в HTML

<td> </td> - от сокращения "table data" , т.е. табличные данные, иначе говоря- ячейки

Таблицы на сайте

В языке HTML отсутствует специальные теги для колонок, а присутствует только теги для ячеек, которые входят в ряды( tr). Создадим таблицу, состоящую из 3 рядов и 5 колонок( рис 1). И наполним эту таблицу контентом (текстом)

html Таблицы

<table >
<tr>	<td>Наименование</td>	<td>Цена закупки</td>	<td>Наценка(%)</td>	<td>Цена продажи</td>	<td>Процент с продаж</td>
</tr>
<tr>	<td>Диван</td>	<td>200000р.</td>	<td>15</td>	<td>250000р.</td>	<td>8</td>
</tr>
<tr>	<td>Кровать</td>	<td>400000р.</td>	<td>25</td>	<td>500000р.</td>	<td>9</td>
</tr>
</table>

Вот что у нас получилось:

НаименованиеЦена закупкиНаценка(%)Цена продажиПроцент с продаж
Диван200000р.15250000р.8
Кровать400000р.25500000р.9

 

Как вы могли заметить, у нас таблица не имеет границ, давайте это поправим, указав атрибут border.

<table boder="1">
...
</table>

Расчет цен

НаименованиеЦена закупкиНаценка(%)Цена продажиПроцент с продаж
Диван200000р.15250000р.8
Кровать400000р.25500000р.9

 

В интернете можно найти не мало атрибутов, для тега table, но все они отвечают за оформление, а оформление мы будем изучать и выполнять в языке css. Урок завершен. Обязательно сами попрактикуйтесь и переходите к следующему уроку.

Если статья понравилась, то поделитесь ей в социальных сетях:

Понравилась статья? Подпишись и будь в курсе всех новостей!

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных Политика конфиденциальности

Вам также будет интересно:

Комментарии (0)


    Vkontakte