Самоучитель по HTML, Таблицы в ХТМЛ.

В HTML таблицы служат не для предоставления данных ввиде таблицы, а для дизайна сайта. Сперва создаётся таблица(каркас страницы), а потом уж вставляется содержание(текст, картинки и другие объекты), но обо всём по порядку:
Таблица создаётся при помощи тэга:
<table> - начало таблицы
... начинка ...
</table> конец таблицы
Между тэгами <table> и </table> вставляются строки(горизонтальные ряды) <tr> и </tr> вот таким образом:

        <table> - начало таблицы
         <tr> - начало ряда
         ...   начинка  ...
        </tr> - конец ряда
        </table> конец таблицы
А между тэгами <tr> и </tr> вставляем ячейки(ящички для контента):<td> и </td> вот так:
      <table>- начало таблицы
      <tr> - начало ряда
      <td> - начало ячейки
       ... контент...
       </td> - конец ячейки
       </tr>- конец ряда
       </table> конец таблицы
         
Это и есть основной шаблон таблицы, далее посмотрим в действии:
Добавим уже извесный атрибут border c значением 1 для наглядности
      <table border="1">
         <tr>
             <td>
         ... контент в твблице...
             </td>
         </tr>
    </table>
    

Далее создаём новый HTML-документ:

    <html>
    <head>
    <title>моя первая страница</title>
    </head>
    <body>
    <table border="1">
    <tr>
    <td>
       ...текст...
    </td>
    </tr>
    </table>
    </body>
    </html> 
... текст ...
В один ряд можно вставить несколько ячеек, я продемонстрирую три:
   <table border="1">
         <tr>
             <td>текст 1 </td>
             <td>текст 2 </td>
             <td>текст 3 </td>
         </tr>
    </table>
    
Перепишите код и он должен получиться вот так:
текст 1 текст 2 текст 3
Также может быть несколько рядов в таблице, в моём примере два:
   <table border="1">
         <tr>
             <td>текст1. 1 </td>
             <td>текст1. 2 </td>
             <td>текст1. 3 </td>
         </tr>
<tr><td>текст 2.1 </td><td>текст 2.2 </td><td>текст 2.3 </td></tr>
    </table>
    
текст 1 текст 2 текст 3
текст 1 текст 2 текст 3

Немного поговорим о размерах:
Размеры таблиц задаются как в картинках атробутом width(ширина) и height(высота) в процентах width="75%" height="100%" или в пикселях(точках) width="400" height="50"
С цифрами нужно быть предельно осторожными, особено если вы используете пиксели, нужно учитывать всё, даже бордюры(border). Ширина таблицы в общем если процентах то, любая(от 0 до 100%), а в пикселях рекоммендую не более 800, т.к. у ваших посетителей может быть разрешение экрана 800 на 600 пикселей, и в этом случае может появиться горизонтальная прокрутка страницы.
С высотой: либо строгий размер в пикселях, либо 100%(на всю страницу), а по содержимому либо незадаёте вообще, либо height="-1". Теперь попрактикуемся:

   <table width="75%" height="300" border="1">
         <tr height="30%">
             <td width="100">текст 1 </td>
             <td>текст 2 </td>
         </tr>
         <tr>
             <td>текст 1 </td>
             <td>текст 2 </td>
         </tr>
    </table>
    
текст 1 текст 2
текст 1 текст 2

Обратите внимание: если задать размер ячейки по ширине, то ниже стоящяя будет такого-же размера, а высоту ячеек можно задавать не только в тэге tr, но и в td , высота всех ячеек тоже будет одинаковой.
А этот строгий по ширине(width):
   <table width="400" height="300" border="1">
         <tr height="30%">
             <td width="100">текст 1 </td>
             <td width="296">текст 2 </td>
         </tr>
         <tr>
             <td>текст 1 </td>
             <td>текст 2 </td>
         </tr>

    </table>
    
текст 1 текст 2
текст 1 текст 2

обратите внимание: 296+100+ две ячейки по 1 пикселю с каждой стороны = 400, но если border="0" то 300+100.
Я не просто продолжил с размеров а, что-бы обратить ваше внимание на то, что вся начинка(в моём примере текст) у нас находится посредине ячеек. Исправить это можно новым атрибутом valign(вертикальное выравнивание) c значением "top"(выровнять по верхнему краю),bottom(по нижнему краю) middle(по центру) хотя последнее можно не задавать т.к. это значение по умолчанию.
Перепишем код:
   <table width="400" height="300" border="1">
         <tr height="30%">
             <td width="100" valign="top">текст 1 </td>
             <td width="296" valign="top">текст 2 </td>
         </tr>
         <tr>
             <td valign="top" align="center" >текст 1 </td>
             <td valign="bottom" >текст 2 </td>
         </tr>
    </table>
    
текст 1 текст 2
текст 1 текст 2

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