Самоучитель по HTML, Отступы в таблицах между ячейками, отступ в ячейках, вкладные таблицы.

Можно сказать, что таблицы мы уже изучили, осталось пару трюков, смотрите:
текст 1 текст 2
текст 3 текст 4


текст 1 текст 2
текст 3 текст 4


текст 1 текст 2
текст 3 текст 4

Если внимательно всмотрелись, то заметили что растояние между ячейками везде разное, в пером примере я ни чего не сделал, а второй и третей таблице добавил новый атрибут: cellspacing -задаёт растояние между ячейками. Второй таблице я задал ноль <table cellspacing="0" border="1"> а третей 5 пикселей <table cellspacing="5" border="1">
Так-же демонстрирую ещё один атрибут тега "table" это - cellpadding растояние от края ячейки к объекту(тексту, картинкам и т.д.), с начала создадим таблицу, а потом разберём:

    <table cellspacing="5" cellpadding="5"  border="1" width="90%"
     height="150" >
        <tr>
              <td valign="top">Выравниваем вверх   </td>
              <td  align="right">выравниваем вправо  </td>
              <td valign="bottom"> выравниваем низ </td>
              <td  align="left"> выравниваем влево  </td>
        </tr>
     </table>
текст 1 текст 2 текст 3 текст 4
В этом примере я хотел показать не выравнивание текста а растояние от края ячейки к тексту , самостоятельно замените cellpadding="5" на cellpadding="10 " или больше и увидите как текст уежает от стенок ячейки.

И последнее, таблицы можно вкладывать одну в другую таким образом:
Код наружной таблицы я изображу красным, а внутренюю синим:

    <table  border="1" width="90%" height="350" >
        <tr>
              <td width="50%" height="175" align="center">
       <table  border="1" width="90%" height="150" >
        <tr>
              <td>1</td>
              <td>2</td>
        </tr>
        <tr>
              <td> 3 </td>
              <td> 4 </td>
        </tr>
     </table>
              </td>
              <td  >2</td>
        </tr>
        <tr>
              <td> 3 </td>
              <td> 4 </td>
        </tr>
     </table>

Вы спросите зачем нужны вкладные таблицы? Мой пример конечно не яркий, но бывают ситуации, когда без них не обойтись... В своей практике я часто ними пользуюсь и даже сейчас на этой странице меню сайта и книги это и есть вкладные таблицы.

А сейчас вас немного испугаю, с таблицами будьте очень осторожны!, это касается размеров таблиц, рядов и ячеек. Очень точно прощитуйте всё: общий размер таблицы, бордюры, растояния между ячейками(если вы сейчас используете браузер "Opera" или "Mozilla FireFox", то в последнем примере ошибок вы не увидите, а если "InternetExplorer" то несмотря, что я прописал высоту и ширину для ячейки с вкладной таблицей она "поплыла" и что-бы этого не было нужно задавать строгие размеры для всех ячеек). И даже если вы ячеейке задали ширину 100 а вставите картинку с шириной 105, то эту ячейку растянет не на 105, на все 200 а то м больше пикселей, так что прописуйте строгие размеры картинкам!!! Рекомендую тестировать свои странички во всех перечисленых мною выше браузерах + "Нескапе"(возможно я не правильно его назвал) и только потом заливать файлы на сервер .

В общем по таблицам у меня всё!!! Если вы внимательно изучали мою книгу, то ваших знаний достаточно, что-б создать сайт как мой сейчас, правда без эфектов к ссылкам и спискам, я ипользую CSS(каскадные таблицы стилей) плюс немного "яваскрипта". Но вам его ещё рано изучать, т.к. без знаний HTML, языки типа: CSS, PHP, Javascript и другие просто пустой звук!!! Ну не будем терять время и переходим к следующему уроку...


Перейти к выбору следующей страницы