Πως δημιουργούμε πίνακες (Tables) στη σελίδα μας

Ένα πολύ απλό ποστ αυτή τη φορά. Πως να χρησιμοποιούμε τα λεγόμενα tables στο blog μας (και σε όποια άλλη ιστοσελίδα). Δυστυχώς ο ενσωματωμένος επεξεργαστής κείμενου, ο οποίος υπάρχει σε πολλές πλατφόρμες blogging (όπως πχ ο blogger) δεν έχει επιλογή για πίνακες.
Αλλά μπορούμε να τα εισάγουμε μόνοι μας. Οι τρόποι είναι αρκετοί. Ας τους δούμε έναν έναν.

Αντιγραφή από ιστοσελίδα

Το πιο εύκολο που μπορεί να κάνει κάποιος είναι να βρει ένα πίνακα από κάποια άλλη σελίδα και απλώς να κάνει copy paste στο δικό του blog. To κακό με αυτή τη λύση είναι ότι θα πάρεις ακριβώς ότι έχει και ο άλλος. Όσες σειρές και όσες στήλες έχει και αυτός.Οπότε εύκολο αλλά όχι εύχρηστο.

Αντιγραφή από excel  (librecalc…)

Ένας σχετικά απλός και πολύ εύχρηστος τρόπος, είναι να δημιουργήσετε τον πίνακα που θέλετε στο excel (ή οποίο ανάλογο πρόγραμμα έχετε) και να τον αντιγράψετε στο blog / ιστοσελίδα σας.
Το καλό με αυτή την λύση, είναι ότι το excel είναι πολύ απλό και εύκολο. Έτσι ακόμα και ένας αρχάριος, μέσα σε μόνο λίγη ώρα, μπορεί να φτιάξει ένα αρκετά πολύπλοκο πίνακα.
Οι πιο πολλές πλατφόρμες blogging, έχουν έξυπνο editor που θα «πιάσει» αμέσως τον πίνακα και θα τον μετατρέψει στη σωστή html.

Online generators

Ο άμεσος πιο εύκολος τρόπος είναι να φτιάξουμε το πίνακα μας είναι με έτοιμους online generators.
Υπάρχουν δεκάδες στο ίντερνετ,άλλοι πιο απλοί άλλοι για πιο περίπλοκους πίνακες.
Εκεί βάζουμε πως θέλουμε να είναι ο πίνακας μας,πόσες σειρές θέλουμε να έχει,πόσες στήλες,αν θέλουμε να έχει διαχωριστικά και ποσό μεγάλα να είναι,τι χρώμα να έχει και πολλά άλλα.
Οι generators όταν θα βάλουμε τα στοιχεία που θέλουμε και τον ετοιμάσουμε θα μας δώσει το κωδικά html. HTML ας πούμε ότι είναι η βασική γλώσσα, στην όποια γράφονται τα άρθρα, τα οποία μεταφράζουν οι browser σε μορφοποιημένο κείμενο.
Αντιγράφουμε τον κωδικά και τον εισάγουμε εκεί που θέλουμε στη HTML οθόνη της ανάρτησης στο blogger. Μπορούμε να τον εισάγουμε και στη κανονική σύνθεση. Πάλι θα τον διαβάσει ο Blogger,αλλά καλύτερα είναι στο HTML οθόνη.
Τόσο απλά.
Κάποιοι generators είναι οι εξής:
tablegen : Απλός χωρίς πολλές επιλογές.
quackit: Λίγο πιο σύνθετος,με πιο πολλές επιλογές.
code-generator.net : Παρόμοιος με τον αποπανω.
spectrum-research : Aρκετα πιο πολύπλοκος generator με css.
Και δεκάδες άλλοι που μπορείτε να βρείτε με το γουγλη

Προγράμματα HTML

Υπάρχουν αρκετά προγράμματα Html στην αγορά,άλλα free και άλλα όχι.
Για τα Linux ο Bluefish είναι απλός καλός και δωρεάν.
Καλός είναι και ο Adobe Dreamweaver κ ο CofeeCup που είναι για Windows αλλά ειναι εμπορικοί.
Εκεί αναλόγως το πρόγραμμα, μπορούμε να κάνουμε τα ίδια με τον generator αλλά και να πειράξουμε περισσότερο τον κώδικα αν έχουμε λίγες γνώσεις html.

Html Homemade

O πιο δύσκολος (αν μπορεί να θεωρηθεί δύσκολη η html) είναι να φτιάξουμε μόνοι μας τον κώδικα του πίνακα. Αν ξέρουμε να το φτιάξουμε, μπορούμε να το κάνουμε ακριβώς όπως εμείς θέλουμε.
Να πειράξεις τα πάντα σχεδόν. Χρώματα, fonts, πλάτος, μήκος, θέση, borders, cellpadding, frames…..
Ακόμα και να μη ξέρουμε και πολύ html με τη βοήθεια του google πάλι μπορούμε να αλλάξουμε αρκετά, αλλά καλό είναι να μάθει κάποιος. Δεν είναι ούτε δύσκολο ούτε θέλει πάρα πολύ χρόνο.
Ας δούμε ένα απλό πινάκα.

Και αυτος ειναι ο κωδικας html για τον παραπανω πινακα

<table style=”background-color: #ffffcc; width: 400px;” border=”2″ cellspacing=”3″ cellpadding=”3″ align=”center”>
<tbody>
   <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
  </tr>
  <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
  </tr>
  <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
  </tr>
</tbody>
</table>

Τα βασικά της html για τα tables ειναι τα εξης

<table>...</table>.Αυτός είναι ο βασικός κώδικας για τον πινακα. Εδώ μέσα μπαίνουν ολα τα στοιχειά. Στο πρώτο <table> αν θέλουμε μπορούμε προαιρετικά να καθορίσουμε κάποια χαρακτηριστικα του πίνακα. Αν δε τα καθορίσουμε δε θα υπάρχουν ή θα είναι τα default του υπολοίπου ποστ.

Με το border=# ορίζουμε αν θα έχει γραμμές διαχωριστικες ο πινάκας και πόσο πάχος θα έχουν.0 σημαίνει οτι δε θα έχουν,και &amp;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  κώδικες και μέσα σε κάθε ενα από αυτούς θα μπουν 3 κώδικες για της στήλες.
<td>..</td> td σημαίνει table data, δηλαδή τα δεδομένα του πίνακα.Εδώ μέσα βάζουμε το κάθε δεδομένο σε κάθε κελί.
Κάποια άλλα που υπάρχουν είναι επίσης
<th></th>.‘th‘ σημαίνει table header,δηλαδή κεφαλίδα πίνακα.Eδω μέσα βάζουμε τις κεφαλιδες της κάθε στήλης.Μπαίνουν στo πρώτο tr κωδικά του πίνακα.
align="..".To align σημαίνει ευθυγράμμιση.Δηλαδή που θα προσανατολιστει αυτό που θέλουμε.Μπορούμε να το βάλουμε στο πρώτο <table> για να προσανατολισούμε ολόκληρο τον πινάκα,η στο κάθε td για να προσανατολισούμε το κάθε κελί ξεχωριστά,στο κάθε tr για να προσανατολισούμε τη κάθε γραμμή ξεχωριστά.Οι τιμές που μπορεί να πάρει είναι οι εξής 
center : Κέντρο
right : Δεξιά
left : Αριστερά
justify : Κάνει όλα τα κελιά στο ίδιο μέγεθος.
colspan=... : Ενώνει 2 η περισσότερα οριζόντια κελιά σε ένα πίνακα, Το εισάγουμε μέσα είτε στο td, είτε th του πίνακα.
rowspan=... : Ενώνει 2 η περισσότερα κάθετα κελιά σε ένα πίνακα. Το εισάγουμε μέσα στο td ειτε th του πινακα που θελουμε.
Υπάρχουν ακόμα αρκετές άλλες επιλογές που μπορούμε να εισάγουμε στο πίνακα αλλά αυτές είναι οι βασικές. Μπορούμε να κάνουμε πιο πολλά και με το css αλλά είναι λίγο πιο πολύπλοκο.
Θα κανω ενα εκτενεστερο ποστ καποια στιγμη αργοτερα για τo css.