Как вставить таблицу на сайт. Варианты таблиц. html, css.

Создание таблицы на сайте - занятие весьма нудное и муторное. Нужно прописывать каждую строку и столбец отдельным тегом. Более того, сама таблица, в чистом 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;}

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