Сайты в интернете бесплатно

Создаем собственный сайт своими руками в Блокноте

Возможно, всего несколько шагов отделяют вас от того, чтобы создать сайт самому бесплатно и выложить его в сети интернет...
Семь пунктов внизу данной статьи содержат информацию об этом.

Еще темы дополнительно

Свой сайт бесплатно?

7 шагов, чтобы создать сайт

Самостоятельное и бесплатное создание сайтов в сети

Шаг 5. Создаем HTML таблицы

В сайтостроении таблицы используются как для представления данных, так и для верстки.

Пример самой обычной таблицы:

<body>

          <table border="1" height="100" width="614">

          <tr>

          <td>Первая ячейка первого ряда</td>

          <td>Вторая ячейка первого ряда</td>

          <td>Третья ячейка первого ряда</td>

          </tr>

          <tr>

          <td>Первая ячейка второго ряда</td>

          <td>Вторая ячейка второго ряда</td>

          <td>Третья ячейка второго ряда</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

Первая ячейка первого ряда	Вторая ячейка первого ряда	Третья ячейка первого ряда
Первая ячейка второго ряда	Вторая ячейка второго ряда	Третья ячейка второго ряда

Теги, атрибуты и их значения

<table> </table> создают таблицу.
Теги <tr> </tr> определяют табличный ряд, расположенный по горизонтали.
<td> </td> определяют ячейку таблицы.
Параметр border="1" определяет табличную рамку, в данном случае равную 1px.
Атрибут width="" – ширина таблицы.
Атрибут height="" определяет высоту таблицы в пикселях или в процентах.

Отменим рамку и окрасим ячейки в различные цвета:

<body>

          <table cellpadding="8" cellspacing="10" height="120" style="color:#ffffee">

          <tr>

          <td style="background-color:#cc0033">Первая ячейка первого ряда</td>

          <td style="background-color:#ccff00">Вторая ячейка первого ряда</td>

          <td style="background-color:#66cc66">Третья ячейка первого ряда</td>

          </tr>

          <tr>

          <td style="background-color:#66ccff">Первая ячейка второго ряда</td>

          <td style="background-color:#ff9933">Вторая ячейка второго ряда</td>

          <td style="background-color:#3366ff">Третья ячейка второго ряда</td>

          </tr>

          </table>

          </body>

          </html>

Результат:

Первая ячейка первого ряда	Вторая ячейка первого ряда	Третья ячейка первого ряда
Первая ячейка второго ряда	Вторая ячейка второго ряда	Третья ячейка второго ряда

HTML атрибуты и их значения

Атрибут cellpadding="" определяет поля между границей ячейки и ее содержимым.
Атрибут cellspacing="" определяет пространство между ячейками таблицы.
Атрибут style="" – линейное CSS включение.
Параметр color: определяет цвет текста.
Параметр background-color: определяет цвет фона.

Источники: HTML таблицы | Подробно о таблицах | HTML цвет | HTML цвет текста | CSS

Автор проекта - Вася Митин | Дата публикации: Апрель 2010 | Обновление: Ноябрь 2018

Шаг 4. HTML изображение Шаг 5. HTML таблицы Шаг 6. HTML верстка