Перейти к содержимому

таблицы html




Как создаются таблицы в HTML  и из чего состоят?

Контейнер <Table></Table> - Это парные и блочные теги тела таблицы и внутри строчки и ячейки. Запишем это в текстовом редакторе и записываются в новой папке и название её  Тable.css и ссылка выглядит так  <link rel="stylesheet" href="table.css" >,  так же как и списки записывается между парными тегами <body></body>: <tr></tr>      строки таблицы и <td></td>  ячейки таблицы.

         <body>

   <table>

<tr>

    <td>какой-то текст</td>

</tr>

    </table>

</body>   создана простая таблица и в браузере будет видно одно слово не похожее на таблицу, без ячеек и столбцов, выглядит это таким образом:

foto

Это конечно не совсем то, что хотелось бы видеть под словом –таблица-. Изменим количество  ячеек:
<table>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
<td>какой-то текст 4</td>
<td>какой-то текст 5</td>
</tr>
    </table>   и выглядит просто строчкой с разными названиями:

foto

Добавим тегов <tr></tr>  с его содержимым и что получим?
<table>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
<td>какой-то текст 4</td>
<td>какой-то текст 5</td>
</tr>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
<td>какой-то текст 4</td>
<td>какой-то текст 5</td>
</tr>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
<td>какой-то текст 4</td>
<td>какой-то текст 5</td>
</tr>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
<td>какой-то текст 4</td>
<td>какой-то текст 5</td>
</tr>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
<td>какой-то текст 4</td>
<td>какой-то текст 5</td>
</tr>
</table>
Получаем такую картинку:

foto

Получаем пять ячеек и 5 не разделенных столбцов. Для этого нужны рамки. Я ниже сейчас допишу что-то в виде шпаргалки, атрибуты рамки , что и за что отвечает:
Border   - отвечает за толщину рамки
Bgcolor  - цвет фона
Cellpadding  - задаёт расстояние между контентом и рамкой ячейки.
Align -  выравнивание содержимого ячейки
Width  -Задаёт ширину таблицы
Bordercolor  - отвечает за цвет рамки, как правило, рамка рисуется трёхмерная, но при добавлении этого атрибута, становится однотонной.
Cellspacing – удаление отступов между ячейками.
Border  - это атрибут таблицы ,теперь пишем <table  border =”2”>, в бордер записываем любое положительное число – это толщина рамки в пикселях и получаем результат:

foto

Каждая таблица имеет заголовки, поэтому верхнюю строку в таблице поменяем и изменим название. Теги   <td></td>   поменяем на  <th></th>   и что видим, содержимое верхней строки выровнено по центру и жирным шрифтом:

foto

Если таблица прижата к левому краю страницы,  то записав так :  <table border =”2”  align=”center”>    таблица выравнивается по центру.     Можно изменить ширину таблицы  в пикселях или процентах и записать это так :

<table border =”2”  align=”center”  width=”80% “ > , такая таблица займёт 80% вашего экрана. Если у вас что-то не будет получаться попробуйте  двойные  ковычки заменить одинарными  и таблица уже будет выглядеть так: 

foto

У нас название столбцов выравнено по центру, а содержимое прижато к левому краю таблицы, в таком случае применяем атрибут уже известный   align=”center”  к содержимому столбцов таблицы. Запишем в одном столбце   <td align='center'>какой-то текст 1</td>  , здесь видно, что в слове     'center'   использованы одинарные ковычки , в браузере ,,Опера,,  , который я использую по другому не работает, не зависимо от того включено на данное время соединение с интернетом или выключено. И вид будет вот такой:

foto

Изменено в первом столбце содержимое первой строчки, на данное время выравнено по центру. Что здесь ещё может не понравиться? Что у каждой ячейки своя рамка, что есть расстояние между ячейками таблицы и что вокруг таблицы есть своя рамка. Сейчас попробуем это исправить атрибутом   Cellspacing  со значением - ноль. Запишем это так :
<table border =”2”,  align=”center”,  width='80%', cellspacing="0">  и выглядеть в браузере будет выглядеть так :

Все параметры нет необходимости запоминать, в современном сайтостроении используются стили – css-каскадные таблицы стилей, в которых все эти параметры прописываются более гибко и дают более хороший результат. Поэтому в контейнере  <head> </head> записываем стили для всей таблицы.
<head>
  <style>
                           table {
                           width="100%";
                           border-collapse:  collapse;
                           border: 1px solid #000;
                           margin-botton: 2em;
                           }
                          
                           table td ,
                          table th {
                           border: 1px solid #000;
                           padding: 7px;
                           }
                           </style>
 </head>  
Я уменьшил количество столбцов и строк и вот что получилось :

foto

    Чтобы создать таблицу состоящую из шапки, подвала и тела нам потребуются дополнительные контейнеры. И внизу под созданной таблицей перед закрывающим тегом </body> пишем шапку таблицы:
<table  width='100%'>
   <thead>
   <tr>
   <th>шапка</th>
   <th>шапка</th>
   <th>шапка</th>
   </tr>
   </thead>
   </table>
Следующее при помощи парных тегов <tfoot></tfoot>   создаётся подвал, в нём также создаём строку <tr><.tr>  и ячейки, здесь как удобно, можно использовать теги <th>  и теги <td>. Записывается это так:
<tfoot>
                        <tr>
                            <th>Подвал</th>
                                   <th>Подвал</th>
                                   <th>Подвал</th>
                        </tr>
                        </tfoot>      
И после подвала создаём тело, при помощи парных тегов <tbody></tbody>  и сделаем в каждой строке по три ячейки.
<tbody>
                           <tr>
                           <td>какой-то текст 1</td>
                           <td>какой-то текст 2</td>
                         <td>какой-то текст 3</td>
                           </tr>
                           <tr>
                           <td>какой-то текст 1</td>
                           <td>какой-то текст 2</td>
                          <td>какой-то текст 3</td>
                           </tr>
                           <tr>
                           <td>какой-то текст 1</td>
                           <td>какой-то текст 2</td>
                        <td>какой-то текст 3</td>
                           </tr>
                           </tbody>             И получаем вот такую таблицу, в стилях  между тегами      <head></head> ,  добавляем границу для ячеек <th>:

foto

И вот так записываем :
                       table td ,
                          table th      {
                           border: 1px solid #000;
                           padding: 7px;
                           }
Здесь, что мы снова видим, что при использовании тегов  <th>,  у нас текст отображается по центру и жирным шрифтом, если эти теги использовать в теле <tbody>, то ошибки не будет.
 Теперь я опишу объединение ячеек по горизонтали и вертикали.
К примеру мы хотим объединить ячейки в шапке, первую и вторую – для этого берём первую ячейку в шапке между тегами <thead></thead> и для неё записываем атрибут   Colspan со значением 2, вот таким образом <th colspan=”2”>шапка</th> и удаляем вторую ячейку, которая находится ниже  <th>шапка</th> - вот эту. Сохраняем изменения и обновляем браузер. При каком-то изменении в записях всегда сохраняйте изменения и обновляйте страницу. Объединили и вот , что получилось:

foto

Теперь объединим ячейки по вертикали,  к примеру,
объединяем первую ячейку в первой строке со второй ячейкой этой же строки в теле таблицы, для этого перемещаемся в контейнер <tbody>, берём первую ячейку из первой строки <td>какой-то текст 1</td> и записываем для неё атрибут  rowspan со значением 2, <td  rowspan=”2” >какой-то текст 1</td> и удаляем первую ячейку во второй строке и получаем результат при сохранении и обновлении страницы.

foto

Таким образом можно объединять ячейки столько, сколько вам нужно, как по горизонтали, так же и вертикали. Но есть некоторые ограничения, максимальное допустимое значение, которое можно объединить 65 534 ячейки.  Если вам понадобится какую-то ячейку разделить на более мелкие, то поможет ещё одна супер способность таблиц это вложение одной таблицы в другую, что это значит?
Возьмём уже объединённую ячейку ( не будем изобретать велосипед), <td rowspan='2' >какой-то текст 1</td> и вместо текста  создадим ещё одну таблицу…
<td rowspan='2' ><table>
<tr>
<td>какой-то текст 1</td>
<td>какой-то текст 2</td>
<td>какой-то текст 3</td>
</tr>
</ table >           вот что получилось:

foto

 К этой вложенной таблице  можно применять те же свойства, что и к основной. Таблицы предназначены для структурирования данных, в HTML  было раньше до появления блоков и слоёв вёрстка сайтов на основе таблиц. Таблица с прозрачной рамкой является удобной гибкой модульной сеткой и сайт свёрстанный на таблицах отображается практически одинаково на любом браузере и нет необходимости подбирать свойства под каждый из браузеров. Таблица оказалась удобным инструментом для быстрого создания сайта. В результате из за низкого порога вхождения,  табличная вёрстка стала бичом интернета, стали появляться много плохих сайтов .Сейчас таблицы применяются там, где и им положено быть, для отображения табличных данных. В умелых руках свёрстанный сайт на таблицах будет хорошим, новичкам пользоваться табличной вёрсткой не желательно. Некоторые сайты свёрстаны на таблицах, обычно это сервисы почтовых рассылок, почтовые службы не позволяют пока что сверстать сайт на блоках. Видео смотрите здесь...
               Продолжение следует…