Таблиці в HTML
Всім привіт, сьогодні я розкажу вам про таблиці в HTML. Таблиці - важлива тема, адже за допомогою них також можна верстати якщо й не весь сайт, то певні блоки точно.
Створення таблиці
Для створення таблиці використовується парний тег "<table>". Атрибути, які він приймає: "border=n" - товщина рамки, "width=n" - ширина таблиці, "align=n" - задає вирівнювання таблиці вцілому, "bgcolor=n" - колір фону таблиці, "bordercolor=n" - колір рамок таблиці, "cellpadding=n" - відступ між рамкою і її вмістом, "cellspacing=n" - відступ між зовнішніми кордонами комірок, і стандартні class, id і style.
Рядки і стовпці
У всіх таблиць є рядки і стовпці. В HTML тег "<tr>" відповідає за рядки, а "<td>" за стовпці. Також можна створювати заголовки колонок за допомогою тегу "<th>".
Об`єднання комірок таблиці
Ось атрибути для тегів "<td> та <th>"
rowspan="n" - об'єднує комірки n суміжніх рядків.
colspan="n" - об'єднує комірки n суміжніх стовпців.
Атрибути комірок
align="n" - вирівнювання вмісту комірки по горизонталі.
valign="n" - вирівнювання вмісту комірки по вертикалі.
width="n" - ширина комірки.
height="n" - висота комірки.
Це і є основна інформація про рядки і стовпці таблиць в HTML
Ось і закінчилась теоретична частина, а почалась практична.
Давайте створимо таблицю за допомогою HTML з атрибутами, які ми вивчали:
<html> <head> <title>Таблиці в HTML</title> <meta charset="utf-8"> </head> <body> <h1>Я вивчаю таблиці в HTML</h1> <h2>Останні 5 зареєстрованих користувачів:</h2> <table border="1" bgcolor="#A1A1A1" bordercolor="red" cellpadding="10" cellspacing="0"> <tr> <th>#</th> <th>email</th> <th>дата</th> </tr> <tr> <td>1</td> <td>mail@example.com</td> <td>14.09.2014</td> </tr> <tr> <td>2</td> <td>mail2@example.com</td> <td>25.10.2014</td> </tr> <tr> <td>3</td> <td>mail3@example.com</td> <td>21.11.2014</td> </tr> <tr> <td>4</td> <td>mail4@example.com</td> <td>11.05.2015</td> </tr> <tr> <td>5</td> <td>mail5@example.com</td> <td>11.07.2015</td> </tr> <tr> <td>Total: <b>6</b></td> <td colspan="2"> colspanned column </td> </tr> <tr> <td rowspan="2" colspan="2" align="center">123</td> </tr> <tr> <td colspan="3"></td> </tr> <tr> <td height="70px" colspan="3" align="center" valign="middle"> колонка вирівняна по-центру, по-середині, з висотою 70px </td> </tr> </table> </body> </html>
Результат:
Переглянути, як це виглядає можна тут: http://examples.web-programming.in.ua/tables_in_html/index.html
Тільки авторизовані користувачі можуть додавати коментарі.