Таблиці в HTML

01.09.2015 22:17 | Admin

Всім привіт, сьогодні я розкажу вам про таблиці в 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

Категорія: HTML | Коментарі відсутні »

Тільки авторизовані користувачі можуть додавати коментарі.

Web-Programming.in.ua

Пошук

Авторизація

Останні коментарі

Популярні статті