Как сделать коды на сайт


Как сделать коды на сайт

Как сделать коды на сайт

Как сделать коды на сайт



HTML таблицы, ширина

Создание таблиц в HTML, код

или как сделать таблицу в HTML собственными силами

Этот урок научит вас создавать HTML таблицы и манипулировать их свойствами.

Когда-то HTML таблицы использовались для верстки сайтов, но сегодня идеологами современных версий языков гипертекстовой разметки: XHTML и HTML 5, рекомендовано применять таблицы по назначению, то есть для представления данных.


Содержание страницы


HTML код таблицы, пример:

<html>
<head>
<title>HTML код таблицы, примеры</title>
</head>
<body>
<table border="1">
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

Результат:

как сделать таблицу в хтмл

Посмотреть в новом окне:

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

  • Теги <table> </table> – объявляют о создании HTML таблицы.
  • border="1" – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
  • Теги <tr> </tr> – определяют табличный ряд.
  • Теги <td> </td> – определяют ячейку HTML таблицы.

HTML таблица может иметь множество рядов и ячеек, а ячейка, в свою очередь, может содержать внутри себя другую таблицу (это свойство будет рассмотрено в одном из следующих уроков).

Как сделать таблицу в HTML | Cellpadding

Определим cellpadding или пространство внутри ячеек таблиц:

<html>
<head>
<title>Создание таблиц в HTML, примеры</title>
</head>
<body>
<table border="1" cellspacing="0"
cellpadding="8" style="background-color:#cc0000; color:#ffffff">
<tr>
<td>ячейка 1, первый ряд</td>
<td> &nbsp; </td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

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

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

Символ пробела &nbsp; в этом месте заполняет пустое пространство внутри ячейки.

Результат:

ячейка 1, первый ряд   ячейка 1, второй ряд ячейка 2, второй ряд

Заметьте, что в данном случае высота и ширина таблицы определена ее содержимым и значением cellpadding. И еще, различными браузерами свойства некоторых атрибутов отображаются по разному, если в Internet Explorer четко видно, что рамка черная, то, например, в Firefox она будет переливаться. Как обойти эти расхождения, вы узнаете в уроке .

Как сделать таблицу в HTML | Cellspacing

Определим cellspacing или расстояние между ячейками и границей таблицы в 12 пикселей:

<html>
<head>
<title>HTML код таблицы, примеры</title>
</head>
<body>
<table border="1" cellspacing="12" cellpadding="12">
<tr>
<td style="background-color:#cc0000; color:#ffffff">ячейка 1, первый ряд</td>
<td> &nbsp; </td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

cellspacing="", как уже было сказано выше, определяет расстояние между границами ячеек таблицы, а также между границами ячеек и границeй таблицы.

Результат:

ячейка 1, первый ряд   ячейка 1, второй ряд ячейка 2, второй ряд

В следующем примере border="0" отменит границы HTML таблицы и ячеек:

<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="0" cellspacing="12" cellpadding="12">
<tr>
<td style="background-color:#cc0000; color:#ffffff">ячейка 1, первый ряд</td>
<td> &nbsp; </td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

Результат:

ячейка 1, первый ряд   ячейка 1, второй ряд ячейка 2, второй ряд

HTML размер таблицы, ширина и высота

Высота и ширина HTML таблицы:

<html>
<head>
<title>Высота и ширина HTML таблицы, пример</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="15" width="90%" height="130">
<tr>
<td>ячейка 1, первый ряд</td>
<td style="background-color:#ffffcc">ячейка 2, первый ряд</td>
<td>ячейка 3, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
<td>ячейка 3, второй ряд</td>
</tr>
</table>
</body>
</html>

Результат:

ячейка 1, первый ряд ячейка 2, первый ряд ячейка 3, первый ряд ячейка 1, второй ряд ячейка 2, второй ряд ячейка 3, второй ряд

Посмотреть в новом окне:

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

  • width – в данном случае была определена ширина HTML таблицы в процентах.
  • height – определяет высоту таблицы.
Дата публикации: Октябрь 2009 | Обновление: Август 2014

  HTML код таблицы  


Источник: http://ab-w.net/HTML/table.php


Как сделать коды на сайт фото


Как сделать коды на сайт

Как сделать коды на сайт

Как сделать коды на сайт

Как сделать коды на сайт

Как сделать коды на сайт

Как сделать коды на сайт

Как сделать коды на сайт

Далее: