ΠΩΣ ΒΑΖΩ ΠΙΝΑΚΑ ΜΕΣΑ ΣΕ ΜΙΑ ΑΝΑΡΤΗΣΗ
Με τον παρακάτω κώδικα μπορούμε να
βάλουμε ένα πίνακα μέσα στην ανάρτησή μας. Ο πίνακας αυτός μπορεί να
έχει όσες στήλες και γραμμές θέλουμε. Οι τίτλοι των στηλών είναι
χρωματισμένοι με έντονο κίτρινο χρώμα. Αμέσως μετά ακολουθεί το
περιεχόμενο των γραμμών του πίνακα που είναι χρωματισμένο με πορτοκαλί
χρώμα. Μπορείτε αν θέλετε να αφαιρέσετε όσες στήλες ή γραμμες θέλετε.
Για να αφαιρέσετε μία γραμμή διαγράψτε όλην την ενότητα που βρίσκεται
μεταξύ του <tr> και του </tr> μαζί με αυτά.
Αν θέλετε να διαγράψετε μία στήλη διαγράψτε μία γραμμή που περιέχει το όνομα της στήλης π.χ. <th>LABEL J</th>.
Για να ρυθμίσετε το πλάτος του πίνακα αλλάξτε το width:960px; Για να ρυμθίσετε το ύψος της κάθε γραμμής αλλάξτε το height:20px;
Για να ρυθμίσετε το πάχος της γραμμής του περιγράμματος των κελλιών και το χρώμα του αλλάξτε το (border:1px solid #FBBB22).
| LABEL A | LABEL B | LABEL C | LABEL D | LABEL E | LABEL F | LABEL G | LABEL I | LABEL J | LABEL K |
|---|---|---|---|---|---|---|---|---|---|
| CELL A1 | CELL A2 | CELL A3 | CELL A4 | CELL A5 | CELL A6 | CELL A7 | CELL A8 | CELL A9 | CELL A10 |
| CELL B1 | CELL B2 | CELL B3 | CELL B4 | CELL B5 | CELL B6 | CELL B7 | CELL B8 | CELL B9 | CELL B10 |
| CELL C1 | CELL C2 | CELL C3 | CELL C4 | CELL C5 | CELL C6 | CELL C7 | CELL C8 | CELL C9 | CELL C10 |
| CELL D1 | CELL D2 | CELL D3 | CELL D4 | CELL D5 | CELL D6 | CELL D7 | CELL D8 | CELL D9 | CELL D10 |
| CELL E1 | CELL E2 | CELL E3 | CELL E4 | CELL E5 | CELL E6 | CELL E7 | CELL E8 | CELL E9 | CELL E10 |
<style type="text/css">
.mytable {width:960px;background-color:#173374;color:#FFFFFF;font-size:13px;border-collapse:collapse;}
.mytable th {background-color:#207907;color:white;}
.mytable td, .mytable th {padding:5px;border:0; }
.mytable td {font-family:Arial; border:1px solid #FBBB22;height:20px;}
</style>
<table class="mytable">
<tr>
<th>LABEL A</th>
<th>LABEL B</th>
<th>LABEL C</th>
<th>LABEL D</th>
<th>LABEL E</th>
<th>LABEL F</th>
<th>LABEL G</th>
<th>LABEL I</th>
<th>LABEL J</th>
<th>LABEL K</th>
</tr>
<tr>
<td>CELL A1</td>
<td>CELL A2</td>
<td>CELL A3</td>
<td>CELL A4</td>
<td>CELL A5</td>
<td>CELL A6</td>
<td>CELL A7</td>
<td>CELL A8</td>
<td>CELL A9</td>
<td>CELL A10</td>
</tr>
<tr>
<td>CELL B1</td>
<td>CELL B2</td>
<td>CELL B3</td>
<td>CELL B4</td>
<td>CELL B5</td>
<td>CELL B6</td>
<td>CELL B7</td>
<td>CELL B8</td>
<td>CELL B9</td>
<td>CELL B10</td>
</tr>
<tr>
<td>CELL C1</td>
<td>CELL C2</td>
<td>CELL C3</td>
<td>CELL C4</td>
<td>CELL C5</td>
<td>CELL C6</td>
<td>CELL C7</td>
<td>CELL C8</td>
<td>CELL C9</td>
<td>CELL C10</td>
</tr>
<tr>
<td>CELL D1</td>
<td>CELL D2</td>
<td>CELL D3</td>
<td>CELL D4</td>
<td>CELL D5</td>
<td>CELL D6</td>
<td>CELL D7</td>
<td>CELL D8</td>
<td>CELL D9</td>
<td>CELL D10</td>
</tr>
<tr>
<td>CELL E1</td>
<td>CELL E2</td>
<td>CELL E3</td>
<td>CELL E4</td>
<td>CELL E5</td>
<td>CELL E6</td>
<td>CELL E7</td>
<td>CELL E8</td>
<td>CELL E9</td>
<td>CELL E10</td>
</tr>
</table>
