Урок 10: Таблицы

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

Это трудно? - спросите вы

Конечто нет, тут главное понять как все работает.

Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете дёргаться, это окажется строго логичным - как и всё в HTML.

Пример 1:

           <---table>
             <---tr>
               <---td>Ячейка 1<---/td>
               <---td>Ячейка 2<---/td>

             <---/tr>
             <---tr>
               <---td>Ячейка 3<---/td>
               <---td>Ячейка 4<---/td>
             <---/tr>

           <---/table>

будет выглядеть в браузере:

Какая разница между <---tr> и <---td>?

Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:

Для вставки таблиц используются 3 базовых тэга:

• <---table> - начало и конец таблицы. Логично.
• <---tr>  - "table row / ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
• <---td>  - сокращение от "table data / табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.

Вот что происходит в Примере 1: таблица начинается с <---table>, затем идёт <---tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <---td>Ячейка 1<---/td> и <---td>Ячейка 2<---/td>. Ряд закрывается <---/tr>, и сразу начинается новый ряд <---tr>. В новом ряду также две ячейки. Таблица закрывается <---/table>.

Ячейка 1 и Ячейка 2 образуют ряд. Ячейка 1 и Ячейка 3 образуют столбец.

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

Пример 2:

             <---table>
             <---tr>

               <---td>Ячейка 1<---/td>
               <---td>Ячейка 2<---/td>
               <---td>Ячейка 3<---/td>
               <---td>Ячейка 4<---/td>

             <---/tr>
             <---tr>
               <---td>Ячейка 5<---/td>
               <---td>Ячейка 6<---/td>
               <---td>Ячейка 7<---/td>

               <---td>Ячейка 8<---/td>
             <---/tr>
             <---tr>           
               <---td>Ячейка 9<---/td>
               <---td>Ячейка 10<---/td>

               <---td>Ячейка 11<---/td>
               <---td>Ячейка 12<---/td>
             <---/tr>
             <---/table>

будет выглядеть в браузере:

Есть ещё какие-нибудь атрибуты?

Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

Пример 3:

           <---table border="1">
             <---tr>

               <---td>Ячейка 1<---/td>
               <---td>Ячейка 2<---/td>
             <---/tr>
             <---tr>
               <---td>Ячейка 3<---/td>

               <---td>Ячейка 4<---/td>
             <---/tr>
           <---/table>

будет выглядеть в браузере:

Толщина рамки специфицируется в пикселах (См. Урок 9)

Как и с изображениями, вы можете указывать размер таблицы в пикселах или в процентах от размера экрана:

Пример 4:

           <---table border="1" width="30%">

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

Ещё атрибуты?

У таблиц есть много атрибутов. Вот ещё два:

• align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, centre или right.
• valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

Пример 5:

           <---td align="right" valign="top">Ячейка 1<---/td>

Что можно вставлять в таблицы?

Теоретически - всё: текст, ссылки и изображения... НО таблицы предназначаются для вывода табличных данных (т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.

В добрые старые времена Internet - т. е. несколько лет назад - таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более крутой способ  - CSS. Но об этом позже.

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