Главные новости

Урок создания таблиц и редактирование информации внутри таблиц, регулировка ширины и высоты таблицы.

Урок создания таблиц и редактирование информации внутри таблиц, регулировка ширины и высоты таблицы.

Даный урок позволит освоить создание таблиц и получить определенный навык в коде начинающим будет очень полезен.

Пример кода таблицы для отдельной странцы.

<html>
<head>
<title>Пример кода таблицы для отдельной странцы.</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>

Результат:

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

 

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

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

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

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

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

<html>
<head>
<title>Как сделать таблицу в HTML | Cellpadding</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 | Cellspacing</title>
</head>
<body>
<table border="1" cellspacing="12" cellpadding="12">
<tr>
<td bgcolor="#666666">ячейка 1, первый ряд</td>
<td>&nbsp; </td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td bgcolor="#999999">ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

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

Результат:

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

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

<html>
<head>
<title>border="0" отменит границы HTML таблицы и ячеек</title>
</head>
<body>
<table border="0" cellspacing="12" cellpadding="12">
<tr>
<td bgcolor="#666666">ячейка 1, первый ряд</td>
<td>&nbsp; </td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td bgcolor="#666666">ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

Результат:

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

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

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

<html>
<head>
<title>Высота и ширина HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="15" width="90%" height="130"> 
<tr>
<td bgcolor="#FF3399">ячейка 1, первый рядок</td>
<td bgcolor="#00FF99">ячейка 2, первый рядок</td>
<td bgcolor="#00FF00">ячейка 3, первый рядок</td>
</tr>
<tr>
<td bgcolor="#66CCFF">ячейка 1, второй рядок</td>
<td bgcolor="#FF0000">ячейка 2, второй рядок</td>
<td bgcolor="#FF0099">ячейка 3, второй рядок</td>
</tr>
</table>
</body>
</html>

Результат:

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

 

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

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

Данные примеры лучше опробовать на виртуальном локальном сервере. Создайте отдельную страничку html и скопируйте туда код определенного примера и откройте после сохранения, а то мой css стиль на данной странице не позволяет увидеть границы таблиц.