--- DanJam. Свобода. Правда. Жизнь ---

Создание таблицы на сайте - занятие весьма нудное и муторное. Нужно прописывать каждую строку и столбец отдельным тегом. Более того, сама таблица, в чистом html виде, для глаза человека воспринимается не очень понятно. Можно легко запутаться. По этой причине существует специальный ГЕНЕРАТОР ТАБЛИЦ, но о нем расскажу чуть ниже. Более того, по этой же причине ещё создали возможность написать таблицу и на чистом css, состоящую из "div" и "span" блоков, но об этом тоже напишу ниже.

Как написать таблицу на html. Дедовский метод.
Написать таблицу на html - самый "простой" способ создания таблицы на сайте. Он был известен даже "дедам" программирования.
Итак, приступим.

1. Для начала потребуется прописать тег TABLE.

<table><table>

2. Сначала создадим строки (они горизонтальные в таблице).
У нас, будет 4 строки.
Таким образом, у каждого tr нужно прописать ровно 4 тега td.


<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>


3. Затем, МЫ - Николай Второй, будем создавать колонки (они вертикальные в таблице) тегом tr, колонок будет 3.

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


4. Теперь начнем заполнять таблицу. Это еще более непривычные для глаза, чем было до этого.
Для начала напишем заголовки колонок. Для этого нужно вставить тег th.

В них же напишем названия колонок

<table>
<tr>
<th>номер</th>
<th>имя</th>
<th>цвет</th>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>




5. Теперь заполним 1-ю часть таблицы

<table>
<tr>
<th>номер</th>
<th>имя</th>
<th>цвет</th>
</tr>

<tr>
<td>1</td>
<td>катя</td>
<td>розовый</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


В общем и целом получилась такая таблица. Дальше просто добавляем разные стили и раскрашиваем ее в css.


td,th {border: 1px solid #ddd; padding: 15px;} // паддинг - расстояния от рамки ячейки до текста в ячейке.
table {border-radius:10px; border-collapse: collapse;} //collapse - удаляет пустые расстояния между ячейками таблицы, radius делает скругления


Вот примерно такая таблица должна получиться:

номер	имя	цвет
1	катя	розовый

Метод 2. Таблица на css. Способ веб-программистов, которым неимется :-)
Иногда, сделать таблицу на html - неудобно или вебмастеру просто не нужно и можно просто прибегнуть к блочной схеме для создания таблицы.
Структура такой таблицы схожа с html, но в ней отсутствуют табличные html-теги. Такую таблицу можно подстроить под экраны смартфонов, всячески модернизировать, она может стать адаптивной.

Вот пример таблицы на css:


<div class="divTable blueTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">head1</div>
<div class="divTableHead">head2</div>
<div class="divTableHead">head3</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">cell1_1</div><div class="divTableCell">cell2_1</div><div class="divTableCell">cell3_1</div></div>
<div class="divTableRow">
<div class="divTableCell">cell1_2</div><div class="divTableCell">cell2_2</div><div class="divTableCell">cell3_2</div></div>
<div class="divTableRow">
<div class="divTableCell">cell1_3</div><div class="divTableCell">cell2_3</div><div class="divTableCell">cell3_3</div></div>
<div class="divTableRow">
<div class="divTableCell">cell1_4</div><div class="divTableCell">cell2_4</div><div class="divTableCell">cell3_4</div></div>
</div>

и конечно же, css стилизация:

div.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
border: 0px solid #AAAAAA;
padding: 2px 2px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
background: #1C6EA4;
border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}



Как видите, сделать такую таблицу очень нудно и глаза легко устают и сбиваются, поэтому придуман способ сделать таблицу легче, с помощью генератора таблиц. Один из которых размещен на этом портале тут ГЕНЕРАТОР ТАБЛИЦ