Главная arrow Программирование arrow HTML arrow Как красиво оформить таблицу Wednesday, March 29 2017  
ГлавнаяКонтактыАдминистрированиеПрограммированиеСсылки
UK-flag-ico.png English Version
GERMAN-flag-ico.png Die deutsche Version
map.gif карта сайта
нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.

Поделиться:

Как красиво оформить таблицу Версия для печати
Написал microsin   
13.06.2008

В статье описывается, как оформить таблицу с красивыми тонкими черными линиями. Основная идея - фон всей таблицы делается черным, толщина рамок выставляется равной нулю, и фон строк таблицы делается белым.

Итак, процесс по шагам (на примере работы в Macromedia Dreamweaver 8):

1. Рисуем каркас таблицы. Предположим, что нам нужно сделать таблицу с 2 столбцами и 4 строками. Идем в меню Insert\Table, выбираем Rows: 4 и Columns: 2, Border thickness (толщину рамки): 0, Cell padding: 3, Cell spacing: 1. Жмем ОК.
table001.JPG

2. Немножко по поводу ширины таблицы. Она бывает двух разновидностей - в пикселах и в процентах. По умолчанию Dreamweaver делает таблицу в пикселах, шириной в 200 пикселов. Смотрим полученный html-код (переключиться к коду меню View\Code или просто Ctrl+`), теги body и html я опускаю:
<table width="200" border="0" cellspacing="1" cellpadding="3">
  <tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

Без сомнений, ширину таблицы задает атрибут width="200" тега table. Width в пикселах задает таблицу фиксированного размера. Это удобно для веб-страниц с фиксированным дизайном - у такой таблицы размеры не будут меняться в зависимости от размера рабочего поля браузера (если таблица не влезет, то в браузере появится горизонтальная полоса прокрутки). 

Иногда удобно задавать ширину таблицы в процентах от ширины рабочего поля окна браузера. В этом случае при изменении размеров окна браузера будет также меняться размер таблицы. Предположим, что мы захотели изменить тип ширины, на процентный, и установить её на 80% относительно окна бораузера. Это удобно делать в режиме дизайна страницы (меню View\Design или просто Ctrl+`), и стандартном режиме редактирования таблиц (View\Table Mode\Standard Mode, кроме того, кнопка F6 циклически меняет режим). Щелкаем мышкой сверху таблицы, тем самым мы её выбираем целиком. В нижней части окна Dreamweaver появится область свойств таблицы Properties, где можно выбрать тип ширины таблицы W в пикселах или %, а также её величину. Ставим эту величину на 80% (см. скриншот).
table002.JPG

Теперь в коде тег table будет таким:
<table width="80%" border="0" cellspacing="1" cellpadding="3">
  ..

3. Делаем фон всей таблицы черным (см. скриншот).
table003.JPG

Теперь в код тега table будет таким (добавился атрибут цвета фона bgcolor):
<table width="80%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
  ..

4. Теперь наша задача сделать фон строк белым. Для этого выделяем не саму таблицу, а её строки. Для этого подводим курсор мыши к левой границе верхней левой ячейки таблицы, чтобы появилсь черная стрелка, направленная вправо, потом удерживаем левую кнопку мыши и опускаем курсор вниз, пока не выделятся все строки. У нашего выделения появится свои свойства, где можно изменить цвет фона на белый (см. скриншот).
table004.JPG

Полный код полученной таблицы:
<table width="80%" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
  <tr bgcolor="#FFFFFF">
    <th scope="col"><strong>Заголовок 1 </strong></th>
    <th scope="col"><strong>Заголовок 2 </strong></th>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>текст 1 </td>
    <td> текст 4 </td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>текст 2 </td>
    <td>текст 5 </td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>текст 3 </td>
    <td>текст 6 </td>
  </tr>
</table>

Здесь тег tr задает строки таблицы, и цвет фона у них задан белым (<tr bgcolor="#FFFFFF">). Столбцы заданы тегами th (для заголовка) и td (для простой строки). Можно обойтись одним тегом td, тогда все ячейки будут иметь одинаковый формат. Внешний вид таблицы будет таким:

Заголовок 1 Заголовок 2
текст 1 текст 4
текст 2 текст 5
текст 3 текст 6

Осталось заметить, что можно задать width у столбцов (внутри тега td), опять-таки либо в пикселах, либо в процентах. Величина в процентах будет взята от ширины таблицы.

[Влияние тегов div align и p align на внешний вид таблицы]

<div align="center">текст</div>
Внутри столбца ячейки таблицы этот тег приводит к тому, что "текст" располагается посередине между верхней и нижней линией бордюрчика таблицы БЕЗ ПРОПУСКА свободного места (таблица получается маленькой по высоте). Если этим тегом div обрамить таблицу целиком, то она располагается центрированно по горизонтали на странице.

<p align="center">текст</p>
Внутри столбца ячейки таблицы этот тег приводит к тому, что "текст" располагается посередине между верхней и нижней линией бордюрчика таблицы. При этом сверху над текстом и снизу под текстом образуются пропуски свободного места (таблица получается большой по высоте).
 

Последнее обновление ( 06.05.2011 )
 

Добавить комментарий

:D:lol::-);-)8):-|:-*:oops::sad::cry::o:-?:-x:eek::zzz:P:roll::sigh:

Защитный код
Обновить

< Пред.   След. >

Top of Page
 
microsin © 2017