Среда, 23 Января 2013 13:35

Таблица HTML

Written by 
Оцени эту запись
(2 Голоса)

Ранее таблицы широко использовались для создания разметки HTML страниц. Их также использовали для верстки сложных форм, чтобы проще было размещать элементы управления и их метки. Но в наше время таблицу HTML допускается использовать только для представления табличных данных -- прайсов, каталогов и др, где данные распределены по колонкам и строкам. В связи с этим, таблицы стали использоваться реже и использовать их нужно правильно.

 

 

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

 

 

 

Элементы <table>(далее table), <tr>(tr) и <td>(td) должны иметь открывающие и закрывающие теги. Причем нельзя путать их порядок -- открывается <table>, потом <tr>, а за ним <td>. И наоборот -- закрывается </td>, потом </tr>, а за ним </table>.

 

 

Простой пример таблицы HTML, содержащей одну строку и две ячейки:

 

 

<table>

      <tr>

             <td>Ячейка 1</td><td>Ячейка 2</td>

      </tr>

</table>

 

Внутри тега table могут также присутствовать такие элементы:

 

<th> -- задает заголовки колонок таблицы, стандартное оформление текста в данном теге - жирный текст и выравнивание по центру; данный элемент должен находиться внутри tr, как и td

 

<caption> -- задает заголовок таблицы, который может отображаться до или после нее при помощи атрибута align со значениями top или bottom. По умолчанию отображается до таблицы. Данный тег очень желателен, поскольку с него считывается описание таблицы и содержащихся в ней данных

 

<col> -- задает характеристики одной или нескольких колонок таблицы - выравнивание горизонтальное и вертикальное, ширина; количество соответствующих колонок задается в атрибуте span

 

<colgroup> -- аналогично <col>, позволяет задавать одной или нескольких колонок таблицы; позволяет уменьшить количество кода за счет выноса общих характеристик элементов таблицы в свои атрибуты

 

<tbody> -- позволяет объединить строки таблицы для создания единого оформления; допускается использование нескольких элементов <tbody> внутри таблицы

 

<tfoot> -- аналогично <tbody> объединяет строки таблицы, располагается в конце таблицы и может быть только в единственном числе

 

<thead> -- аналогично <tfoot>, только находится в начале таблицы

 

 

Атрибуты таблицы

 

Как и к другим элементам HTML, к table применимы все глобальные атрибуты, вроде class, id, и т.д. Кроме них, в HTML5 поддерживается только один атрибут border со значениями "1" или "". Но в HTML4 и XHTML определены и другие атрибуты таблицы HTML.

 

align -- определяет выравнивание таблицы относительно окружающих элементов - left, center, right

 

bgcolor -- определяет фоновый цвет таблицы; задается названием цвета или кодом RGB

 

border -- определяет наличие и толщину границ ячеек таблицы

 

cellpadding -- задается в пикселях, определяет расстояние от границы ячейки до ее содержимого

 

cellspacing -- задается в пикселях, определяет расстояние между ячейками

 

frame -- определяет какая часть внешней границы ячейки таблицы будет видима; возможные значения - void, above, below, hsides, lhs, rhs, vsides, box, border

 

rules -- определяет какая часть внутренних границ таблицы будет видима; возможные значения - none, groups, rows, cols, all

 

summary -- задает краткое описание таблицы

 

width -- определяет ширину таблицы, задается в пикселях или процентах

 

 

Данные атрибуты в своем большинстве были убраны в связи с развитием CSS. Выравнивание, ширину, фон, отступы и границы можно задавать таблице HTML при помощи CSS свойств.

 

Стилизация таблицы

 

Для оформления таблицы, как и других HTML элементов, лучше использовать не атрибуты, а CSS стили.

 

Для задания общих стилей таблицы используйте тег table:

 

table {

...

}

 

Для оформления строк и ячеек нужно использовать теги tr и td:

 

table tr {

...

}

 

table tr td {

...

}

 

 

Для стилизации отдельных строк и ячеек таблицы можно использовать псевдокласс nth-child. Например, задаем фон каждой второй ячейке:

 

table tr td:nth-child(2) {

     background: blue;

}

 

Получим результат:

 

 

1 2 3 4
5 6 7 8
9 10 11 12

 

 

Именно такой подход используется для создания таблицы с разными по цвету строками(в виде зебры) -- Красивая табличка средствами html, css

 

Отступы от границ ячеек по внутреннего контента можно сделать при помощи свойства padding. Отступы между ячейками чаще всего убирают при помощи свойства border-collapse:

 

 

border-collapse: collapse;

 

В таблице можно оформлять отдельные ячейки, задавая им атрибуты width, height, align, valign(вертикальное выравнивание) и тд. кроме того, можно задавать отдельной ячейке стили в атрибуте style. Обратите внимание, что есть ячейке увеличить высоту, то увеличится высота у всех ячеек в ее строке. Если же увеличить ширину, то увеличится ширина всех ячеек данной колонки.

 

 

Примеры таблиц

 

Для объединения ячеек таблицы HTML используются атрибуты rowspan и colspan ячеек. При этом rowspan объединяет ячейки по вертикали, а colspan - по вертикали.

 

Например для создания такой таблицы:

 

 

1
2 3

 

 

Был использован такой код:

 

 

<table class="main_table2">
      <tr>
               <td colspan="2">1</td>
      </tr>
      <tr>
              <td>2</td>
              <td>3</td>
      </tr>
</table>
 
 
А для объединения ячеек по вертикали сделаем так:
 
 
 
<table class="main_table2">
      <tr>
               <td rowspan="2">1</td>

              <td>2</td>

      </tr>
      <tr>
              <td>3</td>
      </tr>
</table>
 
 
1 2
3
 
 
 
Попробуем сделать сложную таблицу 3х4 с различными объединениями ячеек:
 
 
 
1
2 3
4 5
6 7
 
 
 
Для этой таблички мы использовали такой код:
 
 
<table class="main_table2">
      <tr>
             <td colspan="3">1</td>
      </tr>
      <tr>
             <td rowspan="2">2</td>
             <td colspan="2">3</td>
      </tr>
      <tr>
             <td>4</td>
             <td rowspan="2">5</td>
      </tr>
            <tr>
            <td>6</td>
            <td>7</td>
      </tr>
</table>
 
 
Colspan и rowspan - это атрибуты, которые нужно задавать ячейкам <td>. Значения этих атрибутов определяют количество ячеек для объединения. Например, colspan="2" задает объединение 2-х ячеек по горизонтали, а rowspan="3" объединяет 3 ячейки по вертикали. Перед тем, как создавать таблицу с объединенными ячейками, нужно ее нарисовать или хотя бы представить. Не нужно создавать ячейки в тех местах, которые уже заняты ранее объединенными. Например, в выше созданной таблице 3 колонки и 4 строки. Если мы посмотрим на третью строку, то увидим, что ее последняя ячейка объединяет 2 по вертикали. А значит место непосредственно под ней уже занять. Соответственно, в четвертой строке третью ячейку создавать не нужно. Потому у нас в последней строке такой код:
 
 
 
<tr>
            <td>6</td>
            <td>7</td>

 

</tr>
 
 
 
Таблица с использованием заголовков колонок <th>:
 
 
 
Номер Имя Телефон
1 Оля 777-77-77
2 Аня 666-66-66
 
 
 
<table class="main_table2">
      <tr>
          <th>Номер</th>
          <th>Имя</th>
          <th>Телефон</th>
      </tr>
<tr>
          <td>1</td>
          <td>Оля</td>
          <td>777-77-77</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Аня</td>
          <td>666-66-66</td>
      </tr>
</table>
 
 
 
Таблица с использованием разбиения на <thead>, <tbody>, <tfoot>:
 
 
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
21 22 23 24
 
 
Здесь использовались такие стили:
 
table.main_table2 thead {
color: green
}
table.main_table2 tbody{
color: blue
}
table.main_table2 tfoot {
color: violet
}
 
 
И такая таблица:
 
 
<table class="main_table2">
     <thead>
         <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
         </tr>
     </thead>
     <tbody>
         <tr>
                   <td>5</td>
                   <td>6</td>
                   <td>7</td>
                   <td>8</td>
           </tr>
           <tr>
                   <td>9</td>
                   <td>10</td>
                   <td>11</td>
                   <td>12</td>
            </tr>
            <tr>
                   <td>13</td>
                   <td>14</td>
                   <td>15</td>
                   <td>16</td>
           </tr>
            <tr>
                   <td>17</td>
                   <td>18</td>
                   <td>19</td>
                   <td>20</td>
            </tr>
      </tbody>
      <tfoot>
            <tr>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
            </tr>
      </tfoot>
</table>
 
 
 
 

Табличная и блочная верстка

 
Ранее для верстки разметки HTML страницы использовались таблицы. Все основные части сайта были в ячейках таблицы. Но с развитием CSS и появлением таких свойств, как float и position, появилась возможность делать разметку сложной по структуре страницы при помощи простых блоков. В данный момент табличная верстки считается устаревшим подходом. Таблицы рекомендуют использовать только для представления табличных данных. Плюсы и минусы табличной и блочной верстки
 
 
 

Стандартные стили для основных элементов таблицы

 
 
table {
     display: table;
     border-collapse: separate;
     border-spacing: 2px;
     border-color: gray
}
 
table > tr {
   vertical-align: middle;
}
 
tr {
    display: table-row;
     vertical-align: inherit;
     border-color: inherit
}
 
td, th {
    display: table-cell;
     vertical-align: inherit
}
 
th {
     font-weight: bold
}
 
 
 
 

Полезные ссылки

 

 
 
 
 
 
 
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов