ΠρÏŒβλημα: Η απλή αντιγραφή πινάκων 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>