Jak wstawić tabelę do bloga na Bloggerze?

    Zaktualizowano: 2023-08-12T12:19:31Z
Jak wstawić tabelę do bloga na Bloggerze?
Chociaż edytor bloggera ma całkiem sprawny zestaw narzędzi, nadal brakuje niektórych narzędzi, a tabela jest jednym z nich. 

Gdzie jk gdzie, ale w wyszukiwarce Google jest to bardzo cenione, podobnie jak zdjęcia, filmy i inne elementy graficzne. Jednak dodanie do artykułu tabeli nie jest trudne, można ją przenieść z tego samego programu Microsoft Word. 

Jak jednak sprawić, by wyświetlała się ona normalnie nie tylko na komputerach, ale również na urządzeniach mobilnych? Pomoże nam w tym Adaptive Design, którego przykład widać na poniższym obrazku:
tabela HTML

Blogger, jak dodać tabelę do bloga


Przejdźmy teraz do instalacji:
Ta opcja będzie działać dla każdej platformy, czy to Blogger, Wordpress, Joomla, itp. Pokażę jej przykład na Bloggerze - Zobacz demo.

1) Najpierw musisz umieścić kod CSS, w tym celu otwórz edytor HTML swojej witryny.

2) Następnie po znaczniku zamykającym */]]></b:skin> wstaw kod:
<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 {background: #eee;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>
3) Zachowaj temat 

4) Teraz dodajmy strukturę HTML. Utwórz nową wiadomość (Post), przejdź do zakładki HTML i wstaw następujący kod:
<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>
Zastąp nazwy komórek własnymi i opublikuj post. 

To wszystko, jeśli masz jakieś pytania, zadaj je w komentarzach.

Udostępnij szablon

Facebook X (Twitter) Google

Administrator:

Cześć, nazywam się Kuba. W ciągu ostatnich pięciu lat z powodzeniem pracowałem z szablonami i motywami dla Bloggera. Z tego powodu chcę podzielić się z tobą moim doświadczeniem..

Nowe publikacje

Śledź nas na facebooku