Cum să adăugați un tabel HTML receptiv în Blogger și WordPress

Un tabel este o modalitate excelentă de a afișa date sistematice pentru cititori. Îi ajută să înțeleagă mai ușor subiectul și să digere conținutul mult mai ușor.

De aceea trebuie să adăugați un tabel HTML pe site-ul dvs. Blogger și WordPress. Dar, nu toate tabelele sunt receptive pentru dispozitive mobile, mai ales când inserați mai multe rânduri și coloane.

Pentru a rezolva această problemă, am oferit două coduri de tabel HTML responsive în acest articol, pe care le puteți utiliza pe site-urile dvs. Blogger și WordPress.

Puteți copia cu ușurință codul și replica datele din tabel și le puteți modifica în funcție de cerințele dvs. Trebuie doar să înveți elementele de bază ale codurilor de tabel HTML și cum funcționează.

Așa arată tabelul în Dispozitive desktop. Dacă vedeți acest tabel pe Mobile, atunci puteți vedea că se va încărca diferit în funcție de stilul pe care l-ați ales.

Am inclus două stiluri diferite pentru vizualizarea mobilă. Încercați codurile HTML de mai jos și utilizați-le după cum doriți.

Etichete de tabel HTML

Iată termenii importanți utilizați într-un cod de tabel HTML. Puteți afla mai multe despre el aici.

Cod tabel HTML (Stil-1)

 <table> <thead> <tr> <th scope="col">First Name</th> <th scope="col">Email Address</th> <th scope="col">Location</th> <th scope="col">Age</th> </tr> </thead> <tbody> <tr> <td data-label="First Name">Abhishek</td> <td data-label="Email Address">[email protected]</td> <td data-label="Location">India</td> <td data-label="Age">24</td> </tr> <tr> <td data-label="First Name">Mark Ruffalo</td> <td data-label="Email Address">[email protected]</td> <td data-label="Location">United States</td> <td data-label="Age">54</td> </tr> <tr> <td data-label="First Name">Tom Holland</td> <td data-label="Email Address">[email protected]</td> <td data-label="Location">United Kingdom</td> <td data-label="Age">25</td> </tr> <tr> <td data-label="First Name">Tony Stark</td> <td data-label="Email Address">[email protected]</td> <td data-label="Location">United States</td> <td data-label="Age">57</td> </tr> <tr> <td data-label="First Name">Benedict</td> <td data-label="Email Address">[email protected]</td> <td data-label="Location">UK</td> <td data-label="Age">45</td> </tr> </tbody> </table> <style> table {border-collapse: collapse;border-spacing: 0;margin: 2rem 0; width: 100%;} th, td {padding: 1rem 1.5rem; text-align: left;} th {background-color: #008c5f; /* header background color */ color: #fff; /* header text color */ font-weight: 600;} tr { padding: 0;} td {vertical-align: middle;} tr:nth-child(even) td {background-color: rgba(0, 0, 0, .075); /* striped background color */} @media screen and (max-width: 640px) { thead, th {display: none;} tr, td { display: block;} tr {border: 1px solid rgba(0, 0 , 0 ,.15);margin-bottom: 2rem;} tr:last-child {margin-bottom: 0;} tr:nth-child(even) td { background-color: transparent;} td {clear: both;text-align: right;} td:before { content: attr(data-label)': ';float: left;font-weight: bold;margin-right: 1rem;}} </style>

Cod tabel HTML (Stil-2)

 <div class="Side_scroll_table"> <table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Location</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Abhishek</td> <td>[email protected]</td> <td>India</td> <td>24</td> </tr> <tr> <td>Mark Ruffalo</td> <td>[email protected]</td> <td>United States</td> <td>54</td> </tr> <tr> <td>Tom Holland</td> <td>[email protected]</td> <td>United Kingdom</td> <td>25</td> </tr> <tr> <td>Tony Stark</td> <td>[email protected]</td> <td>United States</td> <td>57</td> </tr> <tr> <td>Benedict</td> <td>[email protected]</td> <td>UK</td> <td>45</td> </tr> </tbody> </table> </div> <style> .Side_scroll_table {margin: 1.5rem 0;overflow: auto;white-space: nowrap;} table {border-collapse: collapse;border-spacing: 0;width: 100%;} th, td {padding: 1rem 1.5rem;text-align: left;} th {background-color: #008c5f; /* header background color */ color: #fff; /* header text color */font-weight: 600;} tr {padding: 0;} td {vertical-align: top;} tr:nth-child(even) td {background-color: rgba(0, 0, 0, .075); /* striped background color */} </style>

Cum să adăugați un tabel HTML receptiv în Blogger

Pentru a adăuga tabelul receptiv în Blogger, urmați pașii de mai jos.

1. Conectați-vă la tabloul de bord Blogger
2. Deschideți articolul de blog în vizualizarea HTML
3. Acum copiați codul HTML de mai sus și modificați valoarea
4. Acum lipiți codul în editorul de postări și publicați postarea de blog

Acum Tabelul Responsive este adăugat pe site-ul dvs. Blogger. Puteți personaliza în continuare culoarea titlului, culoarea fontului și greutatea fontului schimbând codul CSS.

Cum să adăugați un tabel HTML receptiv în WordPress

Pentru a adăuga tabelul receptiv în WordPress, urmați pașii de mai jos

1. Conectați-vă la tabloul de bord WordPress
2. Deschideți postarea pe blog și căutați blocul „HTML personalizat”.
3. Acum modificați datele din codul dat și inserați-le în bloc.
4. Acum publică postarea pe blog.

Acum tabelul HTML este adăugat pe site-ul dvs. WordPress. Puteți verifica capacitatea de răspuns a tabelului deschizându-l în vizualizarea Mobile.

Concluzie

Sper că ați adăugat cu succes un tabel HTML receptiv pe site-ul dvs. Blogger și WordPress. Dacă aveți îndoieli în acest sens, mă puteți întreba în secțiunea de comentarii.

Dacă vă place acest conținut, distribuiți-l pe rețelele sociale și urmăriți-ne pe Twitter @key2blogging

Citiți mai multe : Cum să adăugați un anunț de subsol lipicios în WordPress