Как работает веб-страница

Без HTML - не было бы и WWW...

Как работает веб-страница

Создание Таблиц

В настоящее время, одним из наиболее широко используемых инструментов для создания HTML является таблица. Овладев таблицами, Вы не просто «создадите» Веб-страницу, вы ее «спроектируете».

Разнообразие таблиц в Вашем распоряжении — обширное, начиная от простого box до самых сложных вариантов макетов дизайна. В этой статье мы рассмотрим основу таблицы, а также дадим несколько советов и подсказок для экспериментирования, чтобы создавать захватывающие Веб-страницы, которые люди будут охотно посещать.

Снова, как и вся информация, которую Вы хотите отобразить в окне браузера, Ваша таблица должна находиться между <body> и </body> тегами в HTML-документе. Начните таблицу с помощью следующих тегов:

<table>

Каждая горизонтальная строка в таблице начинается с тега: <tr>

Каждая ячейка в строке начинается с тега: <td>

Рассмотрим следующую таблицу:

A1 A2

B1 B2

C1 C2

Здесь мы имеем три строки и два столбца.

<table> начинается таблица

<tr> начинается первая строка

<td> начинается первая ячейка данных (A1)

</td> закрывает ячейку A1

<td> начинается вторая ячейка (A2)

</td> закрывает ячейку A2

</tr> замыкает первую строку

<tr> начинается вторая строка

<td> начинается первая ячейка данных во втором ряду (B1)

</td> закрывает ячейку B1

<td> начинается ячейка B2

</td> закрывает ячейку B2

</tr> закрывает вторую строку

<tr> начинается третья строка

<td> начинается первая ячейка данных в третьем ряду (C1)

</td> закрывает ячейку C1

<td> начинается ячейка C2

</td> закрывает ячейку C2

</tr> закрывает третий ряд

</table> закрывает таблицу

Многие дизайнеры делают структурированные отступы в кодах частей таблицы, чтобы облегчить чтение.

Теперь мы добавим данные и границы к скелету таблицы. Границы — это контур таблицы. Тег

border="значение"

размещается внутри начального тега <table>. Вы можете указать, какой толщины должна быть граница путем присвоения тегу определенного значения (мы присвоим ему значение 1). Нужно обязательно поэкспериментировать с различными значениями, чтобы узнать, как границы выглядят при отображении в браузере. Если Вы не хотите показывать границы, присвойте значение 0.

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

Наберите (или сделайте «вырезать»  и «вставить») следующий код и данные в HTML-документ:

<table border=1>
<tr><td>A1 </td>
<td>A2</td> </tr>
<tr><td>B1 </td>
<td>B2</td> </tr>
<tr><td>C1 </td>
<td>C2</td> </tr>
</table>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Оставить комментарий

Ваш email не будет опубликован.

*


three × 3 =


Поиск Google

(function() { var cx = '013762819107762716451:zn5azro-xtc'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();

Мы Вконтакте

Top
Follow

Get every new post delivered to your Inbox

Join other followers