Στην HTML ένα από τα πιο σημαντικά στοιχεία διαχείρισης της ιστοσελίδας μας είναι οι πίνακες. Παρακάτω ακολουθεί μια άσκηση για την πλήρη αντίληψη των εντολών που χρησιμοποιούμε για τη δημιουργία και την μορφοποίηση πινάκων.
Ας φτιάξουμε λοιπόν την ελληνική σημαία ως πίνακα χρησιμοποιώντας εντολές της HTML!!
Παρατηρείστε με ένα άλλο μάτι αυτή τη φορά την ελληνική σημαία! Είναι ένας πίνακας με πόσες γραμμές και πόσες στήλες;
Έχει χρήση διαφορετικών χρωμάτων, συγχωνευμένα κελιά σε στήλες και γραμμές και καθορισμένο πλάτος σε κάθε στήλη.
Για να δούμε περισσότερες λεπτομέρειες:
Αν ξεκινήσουμε από το δεδομένο ότι η σημαία αποτελείται από 9 γραμμές (όσες και οι συλλαβές της πρότασης ΕΛΕΥΘΕΡΙΑ Ή ΘΑΝΑΤΟΣ), κάνοντας μια καταμέτρηση των στηλών τις βρίσκουμε 4 με διαφορετικό πλάτος η καθεμία, όπως αυτό φαίνεται στην εικόνα σε ποσοστά.
Για να δούμε πως θα ξεκινούσε ο κώδικας σε html:
<html>
<table>
<tr>
<td width=15%> </td> <td width=7% > </td> <td width=15% > </td> <td width=63%> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
</html>
Στην συνέχεια μένει να εμπλουτίσουμε κατάλληλα τον κώδικα χρησιμοποιώντας εντολές για:
<html>
<table>
<tr><td bgcolor=blue width=15% rowspan=2> </td>
<td width=7% rowspan=2> </td>
<td bgcolor=blue width=15% rowspan=2> </td>
<td bgcolor=blue width=63%> </td> </tr>
<tr><td> </td> </tr>
<tr><<td> </td>
<td> </td>
<td> </td>
<td bgcolor=blue> </td> </tr>
<tr><td bgcolor=blue rowspan=2> </td>
<td rowspan=2> </td>
<td bgcolor=blue rowspan=2> </td>
<td> </td> </tr>
<tr><td bgcolor=blue> </td> </tr>
<tr> <td colspan=4> </tr>
<tr bgcolor=blue> <td colspan=4> </tr>
<tr> <td colspan=4> </tr>
<tr bgcolor=blue><td colspan=4> </tr>
</table>
</html>
Επειδή όμως αποθηκεύοντας τον κώδικα αυτό ως ιστοσελίδα θα έχουμε το παρακάτω αποτέλεσμα:
δίνουμε λίγο χώρο στα άδεια κελιά του πίνακα με την εντολή cellpadding:
Ας φτιάξουμε λοιπόν την ελληνική σημαία ως πίνακα χρησιμοποιώντας εντολές της HTML!!
Έχει χρήση διαφορετικών χρωμάτων, συγχωνευμένα κελιά σε στήλες και γραμμές και καθορισμένο πλάτος σε κάθε στήλη.
Για να δούμε περισσότερες λεπτομέρειες:
Για να δούμε πως θα ξεκινούσε ο κώδικας σε html:
<html>
<table>
<tr>
<td width=15%> </td> <td width=7% > </td> <td width=15% > </td> <td width=63%> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td> <td> </td> <td> </td>
</tr>
</table>
</html>
Στην συνέχεια μένει να εμπλουτίσουμε κατάλληλα τον κώδικα χρησιμοποιώντας εντολές για:
- το χρώμα των κελιών (<td bgcolor=blue>) όπου αυτό χρειάζεται
- τη συγχώνευση κελιών (<td rowspan=2> για συγχώνευση γραμμών ή
<td colspan=4> για συγχώνευση στηλών)
<html>
<table>
<tr><td bgcolor=blue width=15% rowspan=2> </td>
<td width=7% rowspan=2> </td>
<td bgcolor=blue width=15% rowspan=2> </td>
<td bgcolor=blue width=63%> </td> </tr>
<tr><td> </td> </tr>
<tr><<td> </td>
<td> </td>
<td> </td>
<td bgcolor=blue> </td> </tr>
<tr><td bgcolor=blue rowspan=2> </td>
<td rowspan=2> </td>
<td bgcolor=blue rowspan=2> </td>
<td> </td> </tr>
<tr><td bgcolor=blue> </td> </tr>
<tr> <td colspan=4> </tr>
<tr bgcolor=blue> <td colspan=4> </tr>
<tr> <td colspan=4> </tr>
<tr bgcolor=blue><td colspan=4> </tr>
</table>
</html>
Επειδή όμως αποθηκεύοντας τον κώδικα αυτό ως ιστοσελίδα θα έχουμε το παρακάτω αποτέλεσμα:
δίνουμε λίγο χώρο στα άδεια κελιά του πίνακα με την εντολή cellpadding:
<table cellpadding=20> και έχουμε το ζητούμενο αποτέλεσμα! 
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου