Урок 4.1: Таблицы в HTML

В современном мире очень мало людей не используют таблицы. В школе, журнал оценок в классе, имеет вид таблицы - колонка "ФИО ученика", колонки с оценками. Дневники тоже имеют вид таблиц - Колонка "день недели", колонка "список предметов", колонка "домашнее задание", колонка оценки.

Язык HTML тоже может создавать таблицы. Первые дизайны сайтов создавались именно с помощью таблиц.

А как же создать таблицу в HTML?

Для создания таблицы в HTML, для этого, предназначены теги:

<table>...</table> - указывает на начало и конец таблицы
<tr>...</tr> - начало и конец строки
<td>...</td> - ячейка таблицы

Пример

<html>
 <head>
   <title>Создания таблицы</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
   </tr>
   <tr>
    <td>Ячейка 4</td> 
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
   </tr>
  </table>
 </body>
</html>

Результат

Таблица в HTML

Атрибут border отвечает за размеры рамки вокруг таблицы. Если его не указывать - то таблица будет без рамки и визуально не будет таблицей (извините за каламбур).

Таблица без атрибута border

Для указания величины рамки указывают атрибутеру border размер в цифрах. Чем больше цифра - тем больше ширина рамки.

<html>
 <head>
   <title>Создания таблицы</title>
 </head>
 <body>
  <table border="3">
   <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
   </tr>
   <tr>
    <td>Ячейка 4</td> 
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
   </tr>
  </table>
 </body>
</html>

Таблица с атрибутом border=3

<< Формат изображений | Перечень уроков | Ширина, высота таблицы >>