Δυστυχώς ο ενσωματωμένος επεξεργαστής κείμενου του blogger δε έχει επιλογή για πίνακες ακόμα. Αλλά μπορούμε να τα εισάγουμε μόνοι μας. Οι τρόποι είναι αρκετοί, για να τους δούμε έναν ένα.
Αντιγραφή
Το πιο εύκολο που μπορεί να κάνει κάποιος είναι να βρει ένα πίνακα από κάποια άλλη σελίδα και απλώς να κάνει copy paste στο δικό του blog. Το κακό με αυτή τη λύση είναι ότι θα πάρεις ακριβώς ότι έχει και ο άλλος. Όσες σειρές και όσες στήλες έχει και αυτός. Οπότε εύκολο αλλά όχι εύχρηστο.
Online generators
Ο άμεσος πιο εύκολος τρόπος είναι να φτιάξουμε το πίνακα μας είναι με έτοιμους online generators.
Υπάρχουν δεκάδες στο ίντερνετ,άλλοι πιο απλοί άλλοι για πιο περίπλοκους πίνακες.
Εκεί βάζουμε πως θέλουμε να είναι ο πίνακας μας,πόσες σειρές θέλουμε να έχει,πόσες στήλες,αν θέλουμε να έχει διαχωριστικά και ποσό μεγάλα να είναι,τι χρώμα να έχει και πολλά άλλα.
Οι generators όταν θα βάλουμε τα στοιχεία που θέλουμε και τον ετοιμάσουμε θα μας δώσει το κωδικά html.HTML είναι η γλώσσα στην όποια είναι φτιαγμένες οι ιστοσελίδες.
Αντιγράφουμε τον κωδικά και τον εισάγουμε εκεί που θέλουμε στη HTML οθόνη της ανάρτησης στο blogger.Μπορούμε να τον εισάγουμε και στη κανονική σύνθεση.Πάλι θα τον διαβάσει ο Blogger,αλλά καλύτερα είναι στο HTML οθόνη. Τόσο απλά.
Κάποιοι generators είναι οι εξής:
tablegen: Απλός χωρίς πολλές επιλογές.
quackit: Λίγο πιο σύνθετος,με πιο πολλές επιλογές.
code-generator.net: Παρόμοιος με τον αποπανω.
spectrum-research: Aρκετα πιο πολύπλοκος generator με css.
Και δεκάδες άλλοι που μπορείτε να βρείτε με το γουγλη.
Προγράμματα HTML
+-+Bluefish+2.2.5_050.png)
Για τα Linux ο Bluefish είναι απλός καλός και δωρεάν.
Καλός είναι και ο Adobe Dreamweaver κ ο CofeeCup που είναι για Windows αλλά ειναι εμπορικοί.
Εκεί αναλόγως το πρόγραμμα, μπορούμε να κάνουμε τα ίδια με τον generator αλλά και να πειράξουμε περισσότερο τον κώδικα αν έχουμε λίγες γνώσεις html.
Html Homemade
Ο πιο δύσκολος (αν μπορεί να θεωρηθεί δύσκολη η html) είναι να φτιάξουμε μόνοι μας τον κώδικα του πίνακα. Αν ξέρουμε να το φτιάξουμε, μπορούμε να το κάνουμε ακριβώς όπως εμείς θέλουμε.
Να πειράξεις τα πάντα σχεδόν. Χρώματα,fonts,πλάτος, μήκος, θέση, borders, cellpadding, frames.....
Ακόμα και να μη ξέρουμε και πολύ html με τη βοήθεια του google πάλι μπορούμε να αλλάξουμε αρκετά, αλλά καλό είναι να μάθει κάποιος. Δε είναι ούτε δύσκολο ούτε θέλει πάρα πολύ χρόνο.
Ας δούμε ένα απλό πινάκα.
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
Και αυτός είναι ο κώδικας html για τον παραπάνω πίνακα:
"<table></table>". Αυτός είναι ο βασικός κώδικας για τον πίνακα. Εδώ μέσα μπαίνουν όλα τα στοιχειά. Στο πρώτο <table> αν θέλουμε μπορούμε προαιρετικά να καθορίσουμε κάποια χαρακτηριστικά του πίνακα. Αν δε τα καθορίσουμε δε θα υπάρχουν η θα είναι τα default του υπολοίπου ποστ.
Με το "border=#" ορίζουμε αν θα έχει γραμμές διαχωριστικές ο πινάκας και πόσο πάχος θα έχουν.0 σημαίνει οτι δε θα έχουν,και >0 θα έχει.
Με το "style=...." ορίζουμε το στυλ που θα έχει ο πίνακας.
Με το "background-color:..." ορίζουμε το background χρώμα του πίνακα,είτε με όνομα για τα βασικά χρώματα (πχ, yellow, black, white... )είτε με το hex κωδικό του κάθε χρώματος που είναι κάπως έτσι" #000000"(αυτός είναι για το μαύρο).
Με το "width=..." ορίζουμε το πλάτος που θα έχει ο πίνακας σε pixels
Mε το "cellpadding=..." ορίζουμε το γέμισμα που θα έχει το κάθε "κουτάκι" η αλλιώς κελί του πινάκα.
Με το "cellspacing=..." oρίζουμε το περιθώριο που θα έχουν τα "κουτάκια" μεταξύ τους και με τα άκρα.
"<tr></tr>". Το tr σημαίνει table row, δηλαδή γραμμή του πινάκα.εδώ μέσα μπαίνουν όλα τα κελιά της κάθε σειράς. Αν πχ έχουμε ένα πινάκα με 6 σειρές και 3 στήλες, θα έχουμε 6 "<tr></tr>" κώδικες και μέσα σε κάθε ένα από αυτούς θα μπουν 3 κώδικες για της στήλες.
"<td></td>".td σημαίνει table data,δηλαδή τα δεδομένα του πίνακα.Εδώ μέσα βάζουμε το κάθε δεδομένο σε κάθε κελί.
Με το "border=#" ορίζουμε αν θα έχει γραμμές διαχωριστικές ο πινάκας και πόσο πάχος θα έχουν.0 σημαίνει οτι δε θα έχουν,και &gt;0 θα έχει.
Με το "style=...." ορίζουμε το στυλ που θα έχει ο πίνακας.
Με το "background-color:..." ορίζουμε το background χρώμα του πίνακα,είτε με όνομα για τα βασικά χρώματα (πχ, yellow, black, white... )είτε με το hex κωδικό του κάθε χρώματος που είναι κάπως έτσι" #000000"(αυτός είναι για το μαύρο).
Με το "width=..." ορίζουμε το πλάτος που θα έχει ο πίνακας σε pixels
Mε το "cellpadding=..." ορίζουμε το γέμισμα που θα έχει το κάθε "κουτάκι" η αλλιώς κελί του πινάκα.
Με το "cellspacing=..." oρίζουμε το περιθώριο που θα έχουν τα "κουτάκια" μεταξύ τους και με τα άκρα.
"<tr></tr>". Το tr σημαίνει table row, δηλαδή γραμμή του πινάκα.εδώ μέσα μπαίνουν όλα τα κελιά της κάθε σειράς. Αν πχ έχουμε ένα πινάκα με 6 σειρές και 3 στήλες, θα έχουμε 6 "<tr></tr>" κώδικες και μέσα σε κάθε ένα από αυτούς θα μπουν 3 κώδικες για της στήλες.
"<td></td>".td σημαίνει table data,δηλαδή τα δεδομένα του πίνακα.Εδώ μέσα βάζουμε το κάθε δεδομένο σε κάθε κελί.
Κάποια άλλα που υπάρχουν είναι επίσης
"<th></th>".'th' σημαίνει table header,δηλαδή κεφαλίδα πίνακα. Εδώ μέσα βάζουμε τις κεφαλίδες της κάθε στήλης. Μπαίνουν στο πρώτο tr κωδικά του πίνακα.
"align=".."". To align σημαίνει ευθυγράμμιση.Δηλαδή που θα προσανατολιστεί αυτό που θέλουμε. Μπορούμε να το βάλουμε στο πρώτο "<table>" για να προσανατολιστούμε ολόκληρο τον πινάκα, η στο κάθε td για να προσανατολιστούμε το κάθε κελί ξεχωριστά,στο κάθε tr για να προσανατολίσουμε τη κάθε γραμμή ξεχωριστά. Οι τιμές που μπορεί να πάρει είναι οι εξής
"center" : Κέντρο
"right" : Δεξιά
"left" : Αριστερά
"justify" : Κάνει όλα τα κελιά στο ίδιο μέγεθος.
"colspan=...": Ενώνει 2 η περισσότερα οριζόντια κελιά σε ένα πίνακα, Το εισάγουμε μέσα είτε στο td,είτε th του πίνακα.
"rowspan=...": Ενώνει 2 η περισσότερα κάθετα κελιά σε ένα πίνακα. Το εισάγουμε μέσα στο td είτε th του πίνακα που θέλουμε.
"align=".."". To align σημαίνει ευθυγράμμιση.Δηλαδή που θα προσανατολιστεί αυτό που θέλουμε. Μπορούμε να το βάλουμε στο πρώτο "<table>" για να προσανατολιστούμε ολόκληρο τον πινάκα, η στο κάθε td για να προσανατολιστούμε το κάθε κελί ξεχωριστά,στο κάθε tr για να προσανατολίσουμε τη κάθε γραμμή ξεχωριστά. Οι τιμές που μπορεί να πάρει είναι οι εξής
"center" : Κέντρο
"right" : Δεξιά
"left" : Αριστερά
"justify" : Κάνει όλα τα κελιά στο ίδιο μέγεθος.
"colspan=...": Ενώνει 2 η περισσότερα οριζόντια κελιά σε ένα πίνακα, Το εισάγουμε μέσα είτε στο td,είτε th του πίνακα.
"rowspan=...": Ενώνει 2 η περισσότερα κάθετα κελιά σε ένα πίνακα. Το εισάγουμε μέσα στο td είτε th του πίνακα που θέλουμε.
Υπάρχουν ακόμα αρκετές άλλες επιλογές που μπορούμε να εισάγουμε στο πίνακα αλλά αυτές είναι οι βασικές. Μπορούμε να κάνουμε πιο πολλά και με το css αλλά είναι λίγο πιο πολύπλοκο.
0 σχόλια:
Δημοσίευση σχολίου