Μορφοποίηση πίνακα HTML: Πρότυπο για πλαίσια, στήλες χωρίς πλαίσια

Μορφοποίηση πινάκων HTML – Σήμερα μια μικρή βασική από την πρακτική. Πολλοί πελάτες ήθελαν να δημιουργήσουν τα δικά τους κείμενα με τους υπαλλήλους τους στο WordPress. Για να εξασφαλιστεί η βελτιστοποίηση του κειμένου για τις μηχανές αναζήτησης, προστίθενται διάφορα μικρά χαρακτηριστικά. Αυτές μπορεί να είναι φωτογραφίες από τη βιβλιοθήκη πολυμέσων, για παράδειγμα, αλλά και ενσωματώσεις βίντεο στο Youtube. Η απλή εισαγωγή πινάκων με αντιγραφή και επικόλληση περιλαμβάνει πολλά αποσπάσματα HTML που δεν θέλετε στο δικό σας σύστημα διαχείρισης περιεχομένου. Σήμερα, ας δούμε ένα παράδειγμα ενός απλού πίνακα HTML που μπορεί να δημιουργήσει και να τροποποιήσει ο καθένας.

Πρόβλημα: Η απλή αντιγραφή πινάκων HTML είναι ακάθαρτη

Είναι σημαντικό για το προσωπικό των εταιρειών να μην αντιγράφει πίνακες, διαφορετικά θα έχουμε πολλά “σκουπίδια” στον κώδικα HTML μας, όπως περιγράφεται. Ο κώδικας HTML δεν είναι ορατός στην “οπτική” περιοχή του επεξεργαστή. Για να το επεξεργαστείτε, πρέπει να κάνετε κλικ στο “Text” στο WordPress Editor. Όταν ο κώδικας απλά αντιγράφεται, παίρνει μαζί του μικρά αποσπάσματα που δεν θέλουμε. Ακολουθεί ένα άμεσο παράδειγμα από την πράξη:

Παράδειγμα – Κακή HTML ενός πίνακα

Υπάρχουν ακόμα πολλά πράγματα που αντιγράφονται εδώ και δεν μπορείτε να τα δείτε:

<th class=”headerSort” tabindex=”0″ title=”Ταξινόμηση αύξουσα” role=”κουμπί κεφαλίδας στήλης”>Όχι.</th>
<th class=”headerSort” tabindex=”0″ title=”Ταξινόμηση αύξουσα” role=”κουμπί κεφαλίδας στήλης”>Περιοχή</th>.
<th class=”headerSort” tabindex=”0″ title=”Ταξινόμηση αύξουσα” role=”κουμπί κεφαλίδας στήλης”>Περιοχή</th>

Βλέπουμε λοιπόν ότι κάποια πράγματα αφαιρούνται με την αντιγραφή και επικόλληση.

Παράδειγμα – Καλή HTML ενός πίνακα

Έτσι θα φαινόταν καθαρό:

<th>Όχι.</th>
<th>Περιοχή</th>
<th>Περιοχή</th>

Λύση: Πρότυπο πίνακα HTML

Πρέπει να χρησιμοποιήσετε λίγη HTML ή να τη γνωρίσετε. Είναι καλύτερο να το αποθηκεύσετε για λίγο και στη συνέχεια να το αντιγράψετε ή να το επεξεργαστείτε:

• Συμβουλή1 : <table> και <tbody> μόνο στην αρχή </table> </tbody> μόνο στο τέλος
• Συμβουλή 2: Χρησιμοποιήστε <th> μόνο στην πρώτη γραμμή και κλείστε την ξανά (th σημαίνει “τίτλος πίνακα”).
• Συμβουλή 3: Το <tr> ανοίγει μια γραμμή και το </tr> την κλείνει (το tr ονομάζεται “Γραμμή πίνακα”)
• Συμβουλή 4: <td> ανοίγει μια τιμή ή ένα πλαίσιο και </td> το κλείνει (td σημαίνει “Δεδομένα πίνακα”)

Ακολουθεί ένας πίνακας με 3 στήλες και 3 γραμμές:

<table>
<tbody>
<tr>
<th>Επικεφαλίδα 1</th>
<th>Επικεφαλίδα 2</th>
<th>Επικεφαλίδα 3</th>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
</tr>
</tbody>
</table>

Αυτό είναι το τελικό τραπέζι:

Ένα άλλο παράδειγμα με 2 στήλες και 2 γραμμές:

<table>
<tbody>
<tr>
<th>Επικεφαλίδα 1</th>
<th>Επικεφαλίδα 2</th>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
</tr>
</tbody>
</table>

Ένα άλλο παράδειγμα με 4 στήλες και 5 γραμμές

<table>
<tbody>
<tr>
<th>Επικεφαλίδα 1</th>
<th>Επικεφαλίδα 2</th>
<th>Επικεφαλίδα 3</th>
<th>Επικεφαλίδα 4</th>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
<td>Κείμενο 4</td>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
<td>Κείμενο 4</td>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
<td>Κείμενο 4</td>
</tr>
<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
<td>Κείμενο 4</td>
</tr></tbody>
</table>

Προσθέστε περισσότερες στήλες και γραμμές

Μπορείτε να αποκτήσετε περισσότερες γραμμές ξεκινώντας ή κλείνοντας μια νέα “Γραμμή πίνακα” μέσα στον “Πίνακα” <table>…</table>. Αυτό φαίνεται ως εξής:

<tr>
…
</td>

Ανάλογα με τον αριθμό των στηλών, πρέπει στη συνέχεια να εισαχθούν τα “Δεδομένα πίνακα”.

<tr>
<td>Κείμενο 1</td>
<td>Κείμενο 2</td>
<td>Κείμενο 3</td>
<td>Κείμενο 4</td>
</tr>