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

34
 

Ένα πολύ απλό ποστ αυτή τη φορά. Πως να χρησιμοποιούμε τα λεγόμενα 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

Untitled-0-home-aggelos-Untitled-0-Bluefish-2.2.5_050

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

Html Homemade

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

Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell

Και αυτος ειναι ο κωδικας 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.

Επιτρέπεται ο ανώνυμος σχολιασμός (αν και απαιτείται email, δεν είναι απαραίτητο να συμπληρώσετε το πραγματικό σας email για να δημοσιευθεί το σχόλιο).
Όλα τα ανώνυμα σχόλια απαιτούν επαλήθεση πριν την δημοσίευση.
Υβριστικά ή spam σχόλια δεν δημοσιεύονται!

Εγγραφείτε
Ειδοποίηση από
guest
34 Comments
νεότερο
παλαιότερο πιο δημοφιλές
Inline Feedbacks
View all comments
Bairon

για να στο εξηγησω πιο καλα (ή τουλ. να προσπαθησω) φτιαχνω μια στοιχηματικη σελιδα. θελω να βαλω πανω στο Live scores. οταν παταει καποιος πανω στο μενου το live scores θελω να τον πηγαινει σε μια σελιδα που εχω κανει εγω με livescores. δεν θελω να τον οδηγει σε αλλο λινκ και σε αλλη σελιδα. αυτο πως γινεται με κωδικα? με το Href?

Bairon

δεν σε πιασα καθολου…εγω πηγα στις σελιδες στο blogger…εκανα μια καινουργια εβαλα html εκανα copy paste τον κωδικα του html του live scores που βρηκα σε ενα σαϊτ πατησα προεπισκοπηση αλλα δεν μου εφανιζοταν…με το google docs που μου λες δεν ξερω να το κανω. οσο για widget που μου λες το live scores δεν το θελω σαν widget στο sidebar αλλα πανω στο μενου οταν το παταει καποιος. υπαρχει καποιος κωδικας για αυτο?

Bairon

οχι…πηρα με html το live score απο αλλη σελιδα και θελω να το βαλω στη δικια μου.

Bairon

σας εστειλα και το μεσημερι στο email αλλα δεν απαντησατε…ξανα στελνω εκει.

Bairon

οσο για το πινακακι μερικες φορες μου το κανει με κεντρικη στοιχιση μερικες οχι. τεσπα επειδη κουραστηκα με το ολο θεμα παω για υπνο. θα το ξαναψαξω αυριο το πρωι και το απορια εχω θα σου γραψω…και παλι ευχαριστω. καληνυχτα.

Bairon

ΤΟ ΕΚΑΝΑ!!!!! το εκανα απο νεα αναρτηση…και μια τελευταια ερωτηση…μηπως ξες το κωδικα που βαζω, οταν παταω σε μια λεξη του μενου να με παει σε μια σελιδα που δημιουργησα εγω απο το blog με html???? ΕΥΧΑΡΙΣΤΩ ΓΙΑ ΟΛΑ….

Bairon

ΣΤΕΙΛΤΟ ΣΕ ΦΩΤΟ….το μενου μου το εχω ακομα ετσι οπως ηταν δεν το εχω αλλαξει καθολου, μονο τις λεξεις στο μενου. επειδη θελω να βαλω καποιο συνδεσμο οταν καποιος παταει καποια λεξη, δεν μπορω να το κανω. οχι ομως url με href που ξεκιναει ο κωδικας. το blogger αν θυμασαι εχει καπου να βαλω στις λεξεις αυτες του μενου καποιες απο αυτες τις σελιδες πως μπορω?

Bairon

καλυτερα να σου στελνω mail,μην γραφουμε συνεχεια εδω…συνεχεια στο email 🙂

Bairon

αυτο με το excel πως γινεται?

Bairon

καλα ενα απλο copy – paste γινεται? επειδη δεν ξερω html εψαξα σημερα να κανω χειροκινητα τον πινακα στο ιντερνετ αλλα δεν μπορουσα να αλλαξω καποια πραγματα που ηθελα. αυτο ειναι το περιγραμμα που εκανα στο excelcomment image

Bairon

πληροφοριακα σε blogger δουλευω. θελω να το βαλω πλαγια στη σελιδα μου. html να χρησιμοποιησω?

Bairon

λοιπον θα σας πω τι ακριβως εκανα… επελεξα τον πινακα τον εκανα αντιγραφη, μετα επελεξα απο τη διαταξη του blogger το “κειμενο” το εκανα copy-paste. οταν εκανα reload τη σελιδα ειδα μονο τις λεξεις που ειχα αναμεσα στα κελια…

Bairon

το 2ο…αλλα δεν καταλαβα τι ειναι τα borders. εγω απλως επελεξα τα κελια εβαλα περιγραμμα.

Bairon

περιγραμμα εβαλα και εσωτερικα, αν εννοεις αυτο σαν borders….

Το εκανα αυτο που μου ειπες αλλα δεν μου βγαζει κατι στο κειμενο….στο html μου βγαζει αυτο αλλα δεν ξερω τι να αλλαξω….

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

Bairon

νταξει εγινε, απλως τωρα δεν ξερω που ακριβως να γραψω αυτα που θελω. εκανα εναν πινακα με λεξεις στο excel και μετα τον εκανα copy paste στο blog να δω το html του για να δω που θα γραφω, αλλα νομιζω ειχε διαφορετικο κωδικα

Bairon

το πινακακι θα το εχω σαν widget οχι σε αρθρο. δηλαδη για να το αλλαζω θα πρεπει να βαζω τις λεξεις που θελω απο το excel???

Bairon

λοιπον εβαλα μερικες λεξεις στο πινακακι του excel το εκανα copy και επιασε. απλως τις λεξεις στο excel τις ειχα με κεντρικη στοιχιση. αυτο στο blog μου δεν το κανει.και ειναι κολλητα στις γραμμες. βαζω κενο πισω απο τις λεξεις και παλι δεν γινεται. τεσπα δεν πειραζει τουλ. εγινε. υπερ-ευχαριστω για τις χρησιμες υποδειξεις που μου κανατε ωστε να καταφερω να το φτιαξω, γιατι αλλιως δεν προκειται να το εφτιαχνα ουτε στους αιωνες των αιωνων.

Bairon

λοιπον κοιτα τι εκανα….αφου σου ειπα οτι δεν ηξερα που ακριβως να γραψω, πηγα και εγραψα στο excel πρωτα και μετα το ξαναεκανα copy paste σε καινουρια αναρτηση…πηρα το html του και το επιδιορθωσα οπως μου ειπες και το εβαλα σαν html/java script στη στηλη του blog μου και δουλεψε. τωρα που μου ειπες για το text align δεν το βρηκα. θα δοκιμασω τωρα μηπως μπορεσω να κανω καποια μορφοποιηση απο την επεξεργασια κειμενου που εχει καθε αναρτηση

Bairon

οκ το εκανα πιο μικρο…ολα ενταξει με τον πινακα

Bairon

αυτο δεν μπορω να το κανω μεσω word? γιατι στο excel δν μπορεις να κανεις πινακα, απλως βαζεις περιγραμματα