Додаємо HTML таблицю на свій сайт (блог)

Коли інформації дуже багато, саме головне подати її як омога простіше, щоб користувачам не доводилося ламати очі, та голову стосовно того, як скласти все до купи, щоб вималювувалась певна картина.

Саме таблиця один з таких інструментів і зараз ви дізнаєтесь, яким чином її можно вставити на любу Сторінку, чи Допис вашого блогу.

Демо варіант таблиці дивіться в кінці публикації.

Відео інструкція

Як вставити в блог таблицю

1. Спершу потрібно розмістити CSS код, для цього відкрийте HTML редактор. Потім, після закриваючого тега: */]]></b:skin> вставте код:

CSS<style type='text/css'>
table {border: 1px solid #eee;border-collapse: collapse;margin: 0;padding: 0;width: 100%;color:#555;}
table caption {font-size: 1.5em;margin: .25em 0 .75em;}
table tr {border: 1px solid #ccc;padding: .35em;}
table th,table td {border-right: 1px solid #ccc!important;text-align: center;border:0;padding: 3px;}
table th {font-size: .85em;letter-spacing: .1em;text-transform: uppercase;background: #ddd;}
table td img {text-align: center;}
@media screen and (max-width: 600px) {
table {border: 0;}
table caption {font-size: 1.3em;}
table thead {display: none;}
table tr {border-bottom: 3px solid #ccc;display: block;margin-bottom: .725em;}
table td {border-bottom: 1px solid #ccc;display: block;font-size: .8em;text-align: right;}
table td:before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
table td:last-child {border-bottom: 0;}}
</style>

Збережіть тему.

2. Тепер додамо HTML структуру. Створіть новий Допис (пост) перейдіть на вкладку HTML і вставте наступний код:

HTML<table>
<caption>Caption Table</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name" scope="row">David Beckham</td>
<td data-label="Address">Manchester, England</td>
<td data-label="Email">davidbe@example.com</td>
<td data-label="Phone Number">021-0101099189</td>
</tr>
<tr>
<td data-label="Name" scope="row">Mike Tyson</td>
<td data-label="Address">California, US</td> 
<td data-label="Email">miketys@example.com</td>
<td data-label="Phone Number">021-9198199189</td>
</tr>
<tr>
<td data-label="Name" scope="row">Justin Bieber</td>
<td data-label="Address">New York, US</td>
<td data-label="Email">justinbr@example.com</td>
<td data-label="Phone Number">021-2929292929</td>
</tr>
<tr>
<td data-label="Name" scope="row">Selena Gomez</td>
<td data-label="Address">Texas, US</td>
<td data-label="Email">sel.gom@example.com</td>
<td data-label="Phone Number">021-8191991919</td>
</tr>
</tbody>
</table>

Замініть назви осередків на свої і опублікуйте повідомлення.

Ось і все, якщо виникнуть питання задавайте в коментарях.

Демо таблиці:

Таблиця

Name	Address	Email	Phone Number
David Beckham	Manchester, England	davidbe@example.com	021-0101099189
Mike Tyson	California, US	miketys@example.com	021-9198199189
Justin Bieber	New York, US	justinbr@example.com	021-2929292929
Selena Gomez	Texas, US	sel.gom@example.com	021-8191991919

Таблиця з розкладом уроків

Демо вигляд таблиці:

 

Урок	Години	Перерва (хв)
1	09:00 - 09:45	10
2	09:55 - 10:40	10
3	10:50 - 11:35	20
4	11:55 - 12:40	20
5	13:00 - 13:45	10
6	13:55 - 14:40	10
7	14:50 - 15:35

Для вставки таблиці на сайт використовуйте наступний код:

HTML<table class="tabela">
	<tbody>
		<tr>
			<th>Урок</th>
			<th>Години</th>
			<th>Перерва (хв)</th>
		</tr>
		<tr>
			<td>1</td>
			<td>09:00 - 09:45</td>
			<td>10</td>
		</tr>
		<tr>
			<td>2</td>
			<td>09:55 - 10:40</td>
			<td>10</td>
		</tr>
		<tr>
			<td>3</td>
			<td>10:50 - 11:35</td>
			<td>20</td>
		</tr>
		<tr>
			<td>4</td>
			<td>11:55 - 12:40</td>
			<td>20</td>
		</tr>
		<tr>
			<td>5</td>
			<td>13:00 - 13:45</td>
			<td>10</td>
		</tr>
		<tr>
			<td>6</td>
			<td>13:55 - 14:40</td>
			<td>10</td>
		</tr>
		<tr>
			<td>7</td>
			<td>14:50 - 15:35</td>
			<td></td>
		</tr>
	</tbody>
</table>

<style>
	table.tabela{text-decoration: none;border-collapse:collapse;width:100%;text-align:center;}
	table.tabela th{font-size:14px; color:#000000;background-color:#ffffff;}
	table.tabela td{font-size:13px;color:#354251;}
	table.tabela td,table.iksweb th{white-space:pre-wrap;padding:10px 5px;line-height:13px;vertical-align: middle;border: 1px solid #e9e9e9;}	table.tabela tr:hover{background-color:#f9fafb}
	table.tabela tr:hover td{color:#354251;cursor:default;}
	.mobile-table{width: 100%; max-width: 100%; overflow-x: auto;}
</style>

Поділитися: