Создание таблиц в 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 или скрипты шапки. Еще ниже выложим скриншот).
| ячейка 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> </td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td>ячейка 2, второй ряд</td> </tr> </table> </body> </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> </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> </td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td> </tr> </table> </body> </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>
Пример
| ячейка 1, первый ряд | ячейка 2, первый ряд | ячейка 3, первый ряд |
| ячейка 1, второй ряд | ячейка 2, второй ряд | ячейка 3, второй ряд |
Атрибуты и значения
width – в данном случае была определена ширина HTML таблицы в процентах.
height – определяет высоту таблицы.
Люди пишут…