Самоучитель по HTML, Изменяем цвет таблиц и растягиваем ячейки.

Как изменить цвет страницы вы уже умеете, а на этой странице вы познакомитесь как задавать цвет фона в HTML-таблицах
<table bgcolor="red"> </table> задаём цвет фона для всей таблицы.
<tr bgcolor="#000000"> </tr> задаём цвет фона для одного ряда.
<td bgcolor="#000000"> </td> задаём цвет фона для отдельной ячейки.
<table bgcolor="red" border="1" bordercolor="#00ffaa"> </table> так-же если border больше нуля, то можно задать цвет бордюра, но обратите внимание, что коректно отобрает только InternetExplorer, а остальные либо вообще игнорируют, или искажают цвет бордюра.
Вы можете самостоятельно поиграться заменяя bgcolor на background...

Часто бывают ситуации, когда нужно: что-бы вверху была одна ячейка, а с низу предположим 2 или больше, для этой цели у нас есть атрибут тега <td> colspan(растягивание ячейки ячейки по горизонтали)
Посмотрим в действии:
   <table width="400" height="300" border="1">
         <tr>
             <td colspan="2">текст 1 </td>
         </tr>
         <tr>
             <td>текст 2 </td>
             <td>текст 3 </td>
         </tr>
    </table>
    
текст 1
текст 2 текст 3

А можно так:
   <table width="400" height="300" border="1">
         <tr>
             <td colspan="2">текст 1 </td>
              <td>текст 2 </td>
         </tr>
         <tr>
             <td>текст 3 </td>
             <td>текст 4 </td>
              <td>текст 5 </td>
         </tr>
    </table>
    
текст 1 текст 2
текст 3 текст 4 текст 5

Или так:
   <table width="400" height="300" border="1">
         <tr>
              <td>текст 1 </td>
             <td colspan="2">текст 2 </td>

         </tr>
         <tr>
             <td>текст 3 </td>
             <td>текст 4 </td>
              <td>текст 5 </td>
         </tr>

    </table>
    
текст 1 текст 2
текст 3 текст 4 текст 5

Существует ещё один нужный атрибут rowspan как и предыдущий, но растягивает ячейки не по горизонтали, а по вертикали( на два и более рядов).
Посмотрим код:
   <table width="400" height="300" border="1">
         <tr>
              <td>текст 1 </td>
             <td rowspan="2">текст 2 </td>

         </tr>
         <tr>
             <td>текст 3 </td>
         </tr>
         </table>
    
текст 1 текст 2
текст 3

А таблица ниже это ваше домашнее задание:
текст 1 текст 2
текст 3 текст 4

Самостоятельно напишите код этой таблицы, если не получится то нажмите эту ссылку (откроется в новой вкладке), а я вас жду на следующем уроке.
Перейти к выбору следующей страницы