Атрибуты тегов TR, TD, TH. Вложеные таблицы.

Атрибуты тега TR(table rows)
valign- тоже значения(вертикальное выравнивание) что и в теге table, честно сказать что этот атрибут игнорируется в теге table и лучше его использовать в каждом теге TR. Чтобы дальше не останавливаться на этом атрибуте, то его можно задавать и в тегах TD и TH, например если вам нужно выровнять какую нибудь одну ячейку.
bgcolor и background так-же используются в теге TR, с теми же атрибутами если нужно изменить фон в ряду.

Атрибуты тегов TD(table data) и TH(table header)
С этими тегами можно использовать при необходимости все атрибуты выше перечисленные атрибуты.

width- как и в теге table в процентах относительно размера таблицы или в пикселях. Из личного опыта я бы рекомендовал о процентах забыть даже для тега table, хотя-бы потому что разрешение экрана у каждого разное и как поведет себя содержимое таблицы остается только предполагать...
Так что выход только один, использовать пиксели!!! С пикселями тоже нужно быть предельно осторожными!, учитывать максимально все. Например мы делаем таблицу шириной 800px(пикселей) и устанавливаем border="0", далее делим ряд на две ячейки: 1) 150px для навигации по сайту; 2) 650px для контента(текста и др. объектов) страницы, 150+650=800 здесь все правильно. Но если border="1" или более то нужно учитывать толщину бордюра и отступы между ячейками!!! Если таблица 800, навигация 150 и у нас 2ячейки с бордюром по 1 с каждой стороны + 1px расстояние между ячейками то для ячейки с контентом остается 645 пикселей!!!
height- высота ячейки как и теге table. Этот атрибут задается только при необходимости.

Таблицы можно вкладывать одну в другую:

    <table border="1" >
      <tr>
         <td>
         <table border="1" >
      <tr>
         <td> </td>
      </tr>
    </table>
     </td>
      </tr>
    </table>

Но чтобы было более понятно мы создадим полноценную страницу: 
         <html>
        <head>
        <title>таблицы в хтмл</title>
        </head>
        <body>
        <table border="1"  width="800" align="center">
         <tr>
           <td  height="150">
<img src="images/logotip.png" alt="Супер сайт" width="100%" height="150">
           </td>
         </tr>
         <tr>
               <td>
     <table border="0"  width="100%">
        <tr valign="top">
         <td width="150" background="images/bg2.gif" height="400">навигация:<br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
          </td>
         <td background="images/fone.png">
         <h1 align="center">Содержание страницы</h1>
         контент страницы
         </td>
      </tr>
     </table>
       </td>
         </tr>
        </table>
        </body>
        </html>

А теперь сохраним как table_2.html и просмотрим (откроется в новой вкладке) что у нас получилось.
С моей точки зрения довольно неплохой шаблон для для сайта. Но это можно было сделать проще!!! Как? Об этом вы узнаете в следующей главе.

Смотрите также: