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

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

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

Что такое психологические границы?


Dendy и Nintendo. История первой игровой приставки в россии.


Почему курсор (стрелка мыши) наклонена?


Как опубликовать исходный html код на своем сайте?


Присяга - это ложь и обман.


Регулярные выражения в notepad++


Как сегодня креативно используют старые ретро-машины.


Какими были аварии в XX веке. Старые автоаварии фотографии.


Что означает цвет. психология цвета. особенности. значение цвета.


Мы видим то, что хотим видеть. Иллюзии зрения.


Ужас Амитивилля. Настоящая история. Доказательства. ФОТО



“ Мы шагаем шагом победным — и все время по бедным, по бедным!”

дед Мазай

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

Это факт!


 Самый большой водопад на планете находится под водой. В Датском проливе, между Исландией и Гренландией на протяжении 200 километров каждую секунду с высоты в несколько километров в Атлантику сбрасывается пять миллионов кубических метров воды. Холодная, и поэтому плотная и тяжелая, вода Северного Ледовитого океана сбрасывается в теплую воду Атлантического океана. Для сравнения, самый полноводный водопад над уровнем моря — Гуаира в Бразилии — сбрасывает «всего» 13 000 кубических метров воды в секунду.

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

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

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



Теги: #статьи портала #Создание сайта (html,css,php,js)


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! Спасибо за прочтение!
Всем веселья и добра! :)