<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article> (HTML5)
<aside>(HTML5)
<audio> (HTML5)
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> (HTML5)
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command> (HTML5)
<datalist> (HTML5)
<dd>
<del>
<details> (HTML5)
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed> (HTML5)
<fieldset>
<figcaption> (HTML5)
<figure> (HTML5)
<font>
<footer> (HTML5)
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header> (HTML5)
<hgroup> (HTML5)
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen> (HTML5)
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark> (HTML5)
<menu>
<meta>
<meter> (HTML5)
<nav> (HTML5)
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> (HTML5)
<p>
<param>
<pre>
<progress> (HTML5)
<q>
<rp> (HTML5)
<rt> (HTML5)
<ruby> (HTML5)
<s>
<samp>
<script>
<section> (HTML5)
<select>
<small>
<source> (HTML5)
<span>
<strike>
<strong>
<style>
<sub>
<summary> (HTML5)
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> (HTML5)
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video> (HTML5)
<wbr> (HTML5)
Η ετικέτα <td>
Ορισμός και χρήση
Με την ετικέτα <td> ορίζουμε ένα κελί στην γραμμή ενός πίνακα. Με την ετικέτα <th> ορίζουμε κελιά-επικεφαλίδες σε έναν πίνακα
Ετικέτα τέλους: </td>

Περισσότερα για τους πίνακες
Παράδειγμα
Πηγαίος Κώδικας Αποτέλεσμα στον browser
<table border="1">
<tr>
<td>γραμμή 1, στήλη 1</td>
<td>γραμμή 1, στήλη 2</td>
</tr>
<tr>
<td>γραμμή 2, στήλη 1</td>
<td>γραμμή 2, στήλη 2</td>
</tr>
</table>
γραμμή 1, στήλη 1 γραμμή 1, στήλη 2
γραμμή 2, στήλη 1 γραμμή 2, στήλη 2
Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5
Οι περισσότερες ιδιότητες της HTML 4.01 στην ετικέτα αυτή δεν υποστηρίζονται στην HTML5
Ιδιότητες
Ιδιότητα Τιμή Περιγραφή
abbr κείμενο ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει μια συντομογραφία για τα περιεχόμενα του κελιού
align right
left
center
justify
char
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει την οριζόντια στοίχιση του περιεχομένου μέσα στο κελί
axis κείμενο ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει ένα συντομευμένο όνομα για το κελί
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Περισσότερα για τα χρώματα
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει το χρώμα του φόντου του κελιού
char χαρακτήρας ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει έναν χαρακτήρα στον οποίο θα στοιχίζεται η στήλη (Χρησιμοποιείται μόνο όταν align="char")
charoff pixels
%
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει την απόσταση εως τον τον πρώτο χαρακτήρα στοίχισης σε μια γραμμή (Χρησιμοποιείται μόνο όταν align="char")
colspan αριθμός Ορίζει τον αριθμό των κελιών που θα επεκτείνεται οριζόντια το κελί στο οποίο υπάρχει η ιδιότητα
headers id κελιών χωρισμένες με κόμμα Ορίζει τα κελιά στα οποία περιέχονται περισσότερες πληροφορίες για το περιεχόμενο του κελιου όπου βρίσκεται η ιδιότητα. Οι πληροφορίες αυτές εμφανίζονται σε text-only browsers
height αριθμός σε pixels ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει το ύψος του κελιού
nowrap - ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Απενεργοποιεί την αναδίπλωση κειμένου μέσα στο κελί
rowspan αριθμός ορίζει τον αριθμό των γραμμών που θα επεκτείνεται το κελί.
valign top
middle
bottom
baseline
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει την κάθετη στοίχιση του περιεχομένου μέσα στο κελί
width αριθμός σε pixels ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5
Ορίζει το μήκος του κελιού
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Η ετικέτα <td> υποστηρίζει τις standard ιδιότητες της HTML5
HTML Γεγονότα που μπορεί να πάρει η ετικέτα:
Η ετικέτα <td> υποστηρίζει τις ιδιότητες events της HTML5
Δοκίμασε το
Πίνακες
Πώς εισάγουμε πίνακες στην σελίδα μας
Μήκος και ύψος ενός πίνακα
Με την ιδιότητα width ορίζουμε το μήκος του πίνακα, ενώ με την height το ύψος του. Οι δύο ιδιότητες αυτές μπορούν να μπουν και στην <tr> και στην <td>. Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος και το ύψος των κελιών και όχι του συνολικού πίνακα
Κελιά χωρίς περιεχόμενο
Σε μερικούς browsers δεν εμφανίζονται σωστά οι πίνακες με κενά κελιά. Γι' αυτό τον λόγο καλό είναι να χρησιμοποιείτε το &nbsp;
Στοίχιση κειμένου μέσα στα κελιά
Με την ιδιότητα align των ετικετών <td> και <tr> καθορίζουμε την στοίχιση του κειμένου μέσα στα κελιά. Αν η ιδιότητα είναι στην ετικέτα <td> τότε η στοίχιση που καθορίσαμε θα ισχύει μόνο για το συγκεκριμένο κελί, ενώ αν είναι στην ετικέτα <tr> τότε η στοίχιση θα ισχύσει για όλα τα κελιά της γραμμής
Χρώμα σε όλο τον πίνακα, στην γραμμή, στο κελί
Μπορούμε να βάλουμε χρώμα σε όλο τον πίνακα ή σε μια γραμμή του πίνακα ή σε ένα κελί του πίνακα, ανάλογα που θα τοποθετήσουμε την ιδιότητα bgcolor ( δηλαδή ή στην ετικέτα <table> ή στην <tr> ή στην <td> )
Εικόνα σαν φόντο σε όλο τον πίνακα, στην γραμμή, στο κελί
Με την ιδιότητα background των ετικετών <table> , <tr> και <td> ορίζουμε μια εικόνα για φόντο σε ολόκληρο τον πίνακα ή σε μια γραμμή ή σε ένα κελί, ανάλογα σε ποια από τις τρεις ετικέτες θα το τοποθετήσουμε
Συγχώνευση κελιών
Οριζόντια συγχώνευση κελιών : Όταν θέλουμε ένα κελί να επεκτείνεται σε πολλές κολόνες, χρησιμοποιούμε την ιδιότητα colspan η οποία ορίζει τον αριθμό των κολόνων που θα επεκτείνεται. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>

Κάθετη συγχώνευση κελιών : Πολλές φορές θέλουμε ορισμένα κελιά στον πίνακα να επεκτείνονται σε πολλές γραμμές. Αυτό γίνετε με την ιδιότητα rowspan της ετικέτας <td>. Η ιδιότητα rowspan ορίζει τον αριθμό των γραμμών που θα επεκτείνεται το κελί. Η ιδιότητα αυτή χρησιμοποιείται και στην ετικέτα <th>