События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Самые жестокие люди в истории мира


Самые глубокие места в мире


Часовая башня выборга. Белая башня.


Ресторан, построенный в туалете. Уникальные места СПб.


Данные не загружаются (импортируются) в базу данных или импортируются долго. Что делать?


Секреты соборов и храмов Выборга. Соборы, храмы и церкви Выборга


Кхаджурахо. Храм секса в Индии. Древний город.


Голубой город. Сиди-Бу-Саид. Тунис.


как выглядели игровые автоматы и приставки в СССР (ФОТО)


притчи о познании себя


старые фотографии НЛО, инопланетян, тарелки летающие.



“Американские интересы чаще всего нарушаются там, где о них еще ничего не слышали.”

Михаил Мамчич

Следующая цитата »

Это факт!


В 2005 году в мире зарегистрировано 58 случаев нападения акулы на человека. Человек каждый год убивает 70 миллионов акул.

Следующий факт »

Ра оставил тебе послание!... (0о0)

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


html, css, div, span, таблицу, table, th, tr, td, таблица, создать, вставить, на сайт, на страницу, веб, урок, уроки, пример таблиц, пример,

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



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




ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)