ΠΩΣ ΒΑΖΩ ΠΙΝΑΚΑ ΜΕΣΑ ΣΕ ΜΙΑ ΑΝΑΡΤΗΣΗ

ΠΩΣ ΒΑΖΩ ΠΙΝΑΚΑ ΜΕΣΑ ΣΕ ΜΙΑ ΑΝΑΡΤΗΣΗ
ΠΙΝΑΚΑΣ
Με τον παρακάτω κώδικα μπορούμε να βάλουμε ένα πίνακα μέσα στην ανάρτησή μας. Ο πίνακας αυτός μπορεί να έχει όσες στήλες και γραμμές θέλουμε. Οι τίτλοι των στηλών είναι χρωματισμένοι με έντονο κίτρινο χρώμα. Αμέσως μετά ακολουθεί το περιεχόμενο των γραμμών του πίνακα που είναι χρωματισμένο με πορτοκαλί χρώμα. Μπορείτε αν θέλετε να αφαιρέσετε όσες στήλες ή γραμμες θέλετε. Για να αφαιρέσετε μία γραμμή διαγράψτε όλην την ενότητα που βρίσκεται μεταξύ του <tr> και του </tr> μαζί με αυτά.

Αν θέλετε να διαγράψετε μία στήλη διαγράψτε μία γραμμή που περιέχει το όνομα της στήλης π.χ. <th>LABEL J</th>.
Για να ρυθμίσετε το πλάτος του πίνακα αλλάξτε το width:960px; Για να ρυμθίσετε το ύψος της κάθε γραμμής αλλάξτε το height:20px;
Για να ρυθμίσετε το πάχος της γραμμής του περιγράμματος των κελλιών και το χρώμα του αλλάξτε το (border:1px solid #FBBB22).

LABEL ALABEL BLABEL CLABEL DLABEL ELABEL FLABEL GLABEL ILABEL JLABEL K
CELL A1CELL A2CELL A3CELL A4CELL A5CELL A6CELL A7CELL A8CELL A9CELL A10
CELL B1CELL B2CELL B3CELL B4CELL B5CELL B6CELL B7CELL B8CELL B9CELL B10
CELL C1CELL C2CELL C3CELL C4CELL C5CELL C6CELL C7CELL C8CELL C9CELL C10
CELL D1CELL D2CELL D3CELL D4CELL D5CELL D6CELL D7CELL D8CELL D9CELL D10
CELL E1CELL E2CELL E3CELL E4CELL E5CELL E6CELL E7CELL E8CELL E9CELL 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>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου