5 Окт, 2018

Html код таблицы

Создание таблиц в HTML, коды таблиц с шириной и высотой. На этой странице собрано несколько примеров Html таблиц в которых можно манипулировать их свойствами.

1. Простая форма

<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>

Пример ниже. (странно, у нас не отображается правильный результат, возможно перебивает scc или скрипты шапки. Еще ниже выложим скриншот).


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

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


Пример таблицы номер один

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

Теги <tr> </tr> – определяют табличный ряд.
Теги <td> </td> – определяют ячейку HTML таблицы.

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

2. Как сделать таблицу в HTML — 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>

Пример


Создание таблиц в HTML, примеры

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


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

3. Как сделать таблицу в 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й таблицы.

Пример


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

ячейка 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>

Пример


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

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


4. 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>

Пример


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

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


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

width – в данном случае была определена ширина HTML таблицы в процентах.
height – определяет высоту таблицы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *