<!-->
<!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)
<!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)
Η ετικέτα <table>
Ορισμός και χρήση
Με την ετικέτα <table> εισάγουμε έναν
πίνακα στην σελίδα μας.
Ετικέτα τέλους: </table>
Περισσότερα για τους πίνακες
Ετικέτα τέλους: </table>
Περισσότερα για τους πίνακες
Παράδειγμα
| Πηγαίος Κώδικας | Αποτέλεσμα στον browser | ||||
|---|---|---|---|---|---|
| <table style=" border: thin solid red"> <tr> <td>γραμμή 1, στήλη 1</td> <td>γραμμή 1, στήλη 2</td> </tr> <tr> <td>γραμμή 2, στήλη 1</td> <td>γραμμή 2, στήλη 2</td> </tr> </table> |
|
Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5
Από όλες τις ιδιότητες που υποστήριζε η HTML 4.01, μόνο η summary συμπεριελαμβάνεται στην HTML5
Ιδιότητες
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
| align | left center right |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την στοίχιση του πίνακα μέσα στην σελίδα |
| bgcolor | rgb(x,x,x) #xxxxxx colorname Περισσότερα για τα χρώματα |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το χρώμα το φόντου του πίνακα |
| border | αριθμός | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το πάχος του περιγράμματος του πίνακα. |
| cellpadding | pixels % |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το μέγεθος του κενού χώρου μεταξύ του πλαισίου των κελιών και του περιεχομένου αυτών |
| cellspacing | pixels % |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το πάχος των σκιασμένων γραμμών που διαχωρίζουν τα κελιά |
| frame | void above below hsides lhs rhs vsides box border |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την εμφάνιση του εξωτερικού πλαισίου του πίνακα. |
| rules | none groups rows cols all |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την εμφάνιση των γραμμών που χωρίζουν τα κελιά μέσα στον πίνακα |
| summary | κείμενο | Ορίζει μια περιγραφή για τον πίνακα |
| width | pixels % |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το μήκος του πίνακα |
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Η ετικέτα <table> υποστηρίζει τις standard ιδιότητες της HTML5
HTML Γεγονότα που μπορεί να πάρει η ετικέτα:
Η ετικέτα <table> υποστηρίζει τις ιδιότητες events της HTML5
Δοκίμασε το
Πίνακες
Πώς εισάγουμε πίνακες στην σελίδα μας
Πώς εισάγουμε πίνακες στην σελίδα μας
Μήκος και ύψος ενός πίνακα
Με την ιδιότητα width ορίζουμε το μήκος του πίνακα, ενώ με την height το ύψος του. Οι δύο ιδιότητες αυτές μπορούν να μπουν και στην <tr> και στην <td>. Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος και το ύψος των κελιών και όχι του συνολικού πίνακα
Με την ιδιότητα width ορίζουμε το μήκος του πίνακα, ενώ με την height το ύψος του. Οι δύο ιδιότητες αυτές μπορούν να μπουν και στην <tr> και στην <td>. Είναι προτιμότερο και συνηθέστερο να ορίζουμε το μήκος και το ύψος των κελιών και όχι του συνολικού πίνακα
