Таблица - основа каждого сайта!

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

Создаем таблицу

Теперь давайте по шагам создадим простенькую таблицу:
Допустим, наша таблица будет состоять из трех строк и четырех столбцов. Создадим таблицу при помощи тэгов и добавим в нее три строки:
1.   <table>
          <tr> </tr>
          <tr> </tr>
          <tr> </tr>
      </table>

Теперь в каждой строке создадим по четыре столбца:
2.   <table>
          <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
          </tr>
          <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
          </tr>
          <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
          </tr>
      </table>

Теперь давайте для наглядности заполним таблицу и добавим параметр "border" (рамку):
3.  <table border="1">
          <tr>
                <td> 1.1 </td>
                <td> 1.2 </td>
                <td> 1.3 </td>
                <td> 1.4 </td>
          </tr>
          <tr>
                <td> 2.1 </td>
                <td> 2.2 </td>
                <td> 2.3 </td>
                <td> 2.4 </td>
          </tr>
          <tr>
                <td> 3.1 </td>
                <td> 3.2 </td>
                <td> 3.3 </td>
                <td> 3.4 </td>
          </tr>
      </table>

4. А теперь посмотрим как этот код выглядит в дейстивии:

1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4

Поиграем цветами в таблице

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

<table bgcolor=""> - параметр bgcolor задает цвет фона таблицы;
<table bordercolor=""> - параметр bordercolor задает цвет рамки таблицы;
Давайте поэкспериментируем этими параметрами с уже созданной нами таблицей:

Код: <table border="2" bordercolor="#00cc00" bgcolor="#ccccff"> <tr> <td bordercolor="#ff0000"> 1.1 </td> <td bordercolor="#6600ff"> 1.2 </td> <td bordercolor="#ff0000"> 1.3 </td> <td bordercolor="#6600ff"> 1.4 </td> </tr> <tr> <td bordercolor="#ff0000"> 2.1 </td> <td bordercolor="#6600ff"> 2.2 </td> <td bordercolor="#ff0000"> 2.3 </td> <td bordercolor="#6600ff"> 2.4 </td> </tr> <tr> <td bordercolor="#ff0000"> 3.1 </td> <td bordercolor="#6600ff"> 3.2 </td> <td bordercolor="#ff0000"> 3.3 </td> <td bordercolor="#6600ff"> 3.4 </td> </tr> </table>

Как выглядит: 1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 3.1 3.2 3.3 3.4

Задание размеров таблицы