Введение в HTML (Таблица <table>)

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

Введение в HTML (Таблица <table>)

Сообщение Slash » Вт сен 18, 2012 9:56 am

Теперь давайте рассмотрим, как пишут таблицы для страниц. Это сложный урок, легко запутаться, по этому будьте внимательнее.

Таблица – это скелет страницы, она составляет дизайн сайта. Строение таблицы начинается с тега <table> и заканчивается </table>, между этими тегами вставляются <tr> и </tr> - определяет строку в таблице. Между тегами <tr> и </tr> вставляются <td> и </td> - определяет отдельную ячейку в таблице.

Данный код составил простейшею таблицу из одной ячейки:

Код: Выделить всё

<table>
    <tr>
        <td></td>
    </tr>
</
table>

Таблица с двумя ячейками:

Код: Выделить всё

<table>
    <tr>
        <td></td>
        <td><td>
    </tr>
</
table>

Чтобы получить таблицу с двумя строками дописываем:

Код: Выделить всё

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</
table

Перейдём к более сложному этапу строения, разместим в одной из ячеек нашей таблицы ещё одну таблицу:

Код: Выделить всё

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</
table>

Таблицу можно подогнать под нужный Вам размер: высоту, ширину. Так же можно изменить размер одной ячейки:

Код: Выделить всё

<table width="400px" height="200px">
    <tr>
        <td width="100"></td>
        <td></td>
    </tr>
</
table>

Элемент width="?" устанавливает ширину таблицы или ячейки. Вместо знака вопроса вставляйте число нужного размера, определяется в пикселях (px) или в процентах (%). Элемент height="?" устанавливает высоту таблицы или ячейки. Внимание! Заданная высота одной ячейки будет определена и для других ячеек расположенных в одной строке.

border="?" - элемент, отдающий команду о ширине бордюра таблицы. Вставляются цифры. Цифра 0 – означает, бордюра нет.

Код: Выделить всё

<table width="400px" height="200px"  border="0">
    <tr> 
        
<td width="100px"></td>
        <td></td>
        <td width="100px"></td>
    </tr>
</
table>

Создать одну ячейку размером с несколько нам поможет элемент colspan="?". Пишем новую строчку таблицы и заменяем знак вопроса на количество ячеек, в данном случае это 3

Код: Выделить всё

<table width="400px" height="200px" border="0">
    <tr>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td width="100px"></td>
    <tr>
        <td></td>
        <td></td>
        <td width="100px"></td>
    </tr>
</
table>

В ячейку таблицы можно вставлять как текст, так и рисунок, сделать цветной фон всей таблицы или одной ячейки:

Код: Выделить всё

<table width="400px" height="200px" border="0">
    <tr>
        <td colspan="3" bgcolor="#FF0000"></td>
    </tr>
    <tr>
        <td width="100px" bgcolor="#0000FF"></td>
        <td bgcolor="#00FF00"></td>
        <td width="100px" bgcolor="#0000FF"></td>
    </tr>
</
table>

Давайте попробуем создать новую таблицу и вставим в неё текст и картинку. Сделаем бордюр небольшой ширины, так можно видеть, как построена Ваша таблица:

Код: Выделить всё

<html>
<
head>
    <title>Главная</title>
</
head>
<
body>
    <table width="100%" border="1px">
        <tr>
            <td colspan="2">
                <center><img src="risunok.jpg" border="0"></center>
            </td>
        </tr>
        <tr>
            <td width="20%"></td>
            <td width="80%">
                <center><b>Добро пожаловать на сайт DANFA.ORG!</b></center>
            </td>
        </tr>
    </table>
</
body>
<
html>

Вы прочли основы создания страниц на языке HTML, очень надеюсь, что этого было полезно и достаточно для того, что бы понять, как написать свою первую страничку.

Рекомендую после изучения HTML перейти к Введению в PHP (Уроки)
Реклама

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость