Εργαλεία προσβασιμότητας

  • facebooksocial
  • xsocial
  • youtubesocial
  • instagramsocial
ΓΥΜΝΑΣΙΟ ΑΓΙΟΥ ΑΝΤΩΝΙΟΥ

Πίνακες

Λεπτομέρειες

Απλός Πίνακας

Τμήμα Αριθμός Μαθητριών Αριθμός Μαθητών Σύνολο
Α1 13 12 25
Α2 9 5 14
Β1 23 4 27
Β2 21 3 24
Γ1 8 6 14
Δείτε τον κώδικα 

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Τμήμα</th>
        <th>Αριθμός Μαθητριών</th>
        <th>Αριθμός Μαθητών</th>
        <th>Σύνολο</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Α1</td><td>13</td><td>12</td><td>25</td></tr>
      <tr><td>Α2</td><td>9</td><td>5</td><td>14</td></tr>
      <tr><td>Β1</td><td>23</td><td>4</td><td>27</td></tr>
      <tr><td>Β2</td><td>21</td><td>3</td><td>24</td></tr>
      <tr><td>Γ1</td><td>8</td><td>6</td><td>14</td></tr>
    </tbody>
  </table>
</div>

Πίνακας με Θέμα και Αρχείο

Θέμα Αρχείο
Δειγματικό αρχείο.pptx
Δειγματικό αρχείο.zip
Δειγματικό εικονίδιο ηχητικού αρχείου
Δείτε τον κώδικα 

<div class="table-container table-files">
  <table>
    <thead>
      <tr>
        <th>Θέμα</th>
        <th>Αρχείο</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Δειγματικό αρχείο .pptx</td>
        <td>
          <a href="/myuploads/documents/deigmata_archeion/deigma_powerpoint.pptx" target="_blank" rel="noopener">
            <img src="/images/icon-ppt.jpg">
          </a>
        </td>
      </tr>
      <tr>
        <td>Δειγματικό αρχείο .zip</td>
        <td>
          <a href="/myuploads/documents/deigmata_archeion/deigma_zip.zip" target="_blank" rel="noopener">
            <img src="/images/icon-zip.jpg">
          </a>
        </td>
      </tr>
      <tr>
        <td>Δειγματικό εικονίδιο ηχητικού αρχείου</td>
        <td>
          <a><img src="/images/icon-sound.jpg"></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Πίνακας με Θέμα, Αρχείο και Ημερομηνία

Θέμα Αρχείο Ημερομηνία
Δειγματικό αρχείο.pdf 01/01/2025
Δειγματικός σύνδεσμος ιστοσελίδας 01/01/2025
Δειγματικό αρχείο.docx 01/01/2025
Δειγματικό αρχείο.xls 01/01/2025
Δείτε τον κώδικα 

<div class="table-container table-files">
  <table>
    <thead>
      <tr>
        <th>Θέμα</th>
        <th>Αρχείο</th>
        <th>Ημερομηνία</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Δειγματικό αρχείο .pdf</td>
        <td>
          <a href="/myuploads/documents/deigmata_archeion/deigma_pdf.pdf" target="_blank" rel="noopener">
            <img src="/images/icon-acrobat.jpg">
          </a>
        </td>
        <td>01/01/2020</td>
      </tr>
      <tr>
        <td>Δειγματικός σύνδεσμος ιστοσελίδας</td>
        <td>
          <a href="https://www.schools.ac.cy/" target="_blank" rel="noopener">
            <img src="/images/icon-ie.jpg">
          </a>
        </td>
        <td>01/01/2020</td>
      </tr>
      <tr>
        <td>Δειγματικό αρχείο .docx</td>
        <td>
          <a href="/myuploads/documents/deigmata_archeion/deigma_word.docx" target="_blank" rel="noopener">
            <img src="/images/icon-word.jpg">
          </a>
        </td>
        <td>01/01/2020</td>
      </tr>
      <tr>
        <td>Δειγματικό αρχείο .xls</td>
        <td>
          <a href="/myuploads/documents/deigmata_archeion/deigma_excel.xlsx" target="_blank" rel="noopener">
            <img src="/images/icon-xls.jpg">
          </a>
        </td>
        <td>01/01/2020</td>
      </tr>
    </tbody>
  </table>
</div>

Πίνακας με κελί που επεκτείνεται 2 γραμμές (rowspan)

Θεματική Ενότητα Υποενότητα Λεπτομέρειες Λήψη Email
Περιγραφή
Δραστηριότητα Α Υποενότητα 1 Σύντομη περιγραφή pdf Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.
Υποενότητα 2 Δεύτερη περιγραφή pdf
Δραστηριότητα Β Υποενότητα 1 Περιγραφή για Β1 pdf Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.
Υποενότητα 2 Περιγραφή για Β2 pdf
Δείτε τον κώδικα 
<div class="table-container table-files maxwidthtable">
  <table border="1">
    <thead>
      <tr>
        <th rowspan="2">Θεματική Ενότητα</th>
        <th rowspan="2">Υποενότητα</th>
        <th>Λεπτομέρειες</th>
        <th rowspan="2">Λήψη</th>
        <th rowspan="2">Email</th>
      </tr>
      <tr>
        <th>Περιγραφή</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Δραστηριότητα Α</td>
        <td>Υποενότητα 1</td>
        <td>Σύντομη περιγραφή</td>
        <td style="text-align: center;">
          <a href="#"><img src="/images/icon-acrobat.jpg" alt="pdf"></a>
        </td>
        <td rowspan="2"><a href="mailto:Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.">Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.</a></td>
      </tr>
      <tr>
        <td>Υποενότητα 2</td>
        <td>Δεύτερη περιγραφή</td>
        <td style="text-align: center;">
          <a href="#"><img src="/images/icon-acrobat.jpg" alt="pdf"></a>
        </td>
      </tr>
      <tr>
        <td rowspan="2">Δραστηριότητα Β</td>
        <td>Υποενότητα 1</td>
        <td>Περιγραφή για Β1</td>
        <td style="text-align: center;">
          <a href="#"><img src="/images/icon-acrobat.jpg" alt="pdf"></a>
        </td>
        <td rowspan="2"><a href="mailto:Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.">Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.</a></td>
      </tr>
      <tr>
        <td>Υποενότητα 2</td>
        <td>Περιγραφή για Β2</td>
        <td style="text-align: center;">
          <a href="#"><img src="/images/icon-acrobat.jpg" alt="pdf"></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Πίνακας με κελί που επεκτείνεται σε 2 στήλες (colspan)

Πληροφορίες Εκπαιδευτικής Δραστηριότητας
Τίτλος Δραστηριότητα Γλώσσας
Ημερομηνία 05/09/2025
Δείτε τον κώδικα 
<div class="table-container table-files">
  <table border="1">
    <thead>
      <tr>
        <th colspan="2">Πληροφορίες Εκπαιδευτικής Δραστηριότητας</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Τίτλος</td>
        <td>Δραστηριότητα Γλώσσας</td>
      </tr>
      <tr>
        <td>Ημερομηνία</td>
        <td>05/09/2025</td>
      </tr>
    </tbody>
  </table>
</div>

Σύνθετος Πίνακας (rowspan / colspan)

Θεματική Ενότητα Αρχεία Email
Περιγραφή Λήψη
Δραστηριότητα Α Σύντομη περιγραφή pdf Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.
Δραστηριότητα Β Περιγραφή δεύτερη pdf Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.
Δείτε τον κώδικα 
<div class="table-container table-files maxwidthtable">
  <table border="1">
    <thead>
      <tr>
        <th rowspan="2">Θεματική Ενότητα</th>
        <th colspan="2">Αρχεία</th>
        <th rowspan="2">Email</th>
      </tr>
      <tr>
        <th>Περιγραφή</th>
        <th>Λήψη</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Δραστηριότητα Α</td>
        <td>Σύντομη περιγραφή</td>
        <td style="text-align: center;">
          <a href="#"><img src="/images/icon-acrobat.jpg" alt="pdf"></a>
        </td>
        <td><a href="mailto:Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.">Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.</a></td>
      </tr>
      <tr>
        <td>Δραστηριότητα Β</td>
        <td>Περιγραφή δεύτερη</td>
        <td style="text-align: center;">
          <a href="#"><img src="/images/icon-acrobat.jpg" alt="pdf"></a>
        </td>
        <td><a href="mailto:Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.">Αυτή η διεύθυνση Email προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.</a></td>
      </tr>
    </tbody>
  </table>
</div>

Δυναμικός Πίνακας

ΒαθμίδαΓνωστικό ΑντικείμενοΙστοσελίδαΕπικοινωνία
Διεύθυνση Δημοτικής ΕκπαίδευσηςΑγγλικά
Διεύθυνση Δημοτικής ΕκπαίδευσηςΑγωγή Υγείας
Διεύθυνση Δημοτικής ΕκπαίδευσηςΓεωγραφία
Διεύθυνση Δημοτικής ΕκπαίδευσηςΕλληνικά
Διεύθυνση Δημοτικής ΕκπαίδευσηςΕικαστικές Τέχνες
Διεύθυνση Δημοτικής ΕκπαίδευσηςΘρησκευτικά
Διεύθυνση Δημοτικής ΕκπαίδευσηςΙστορία
Διεύθυνση Δημοτικής ΕκπαίδευσηςΛογοτεχνία
Διεύθυνση Δημοτικής ΕκπαίδευσηςΜαθηματικά
Διεύθυνση Δημοτικής ΕκπαίδευσηςΜουσική
Διεύθυνση Δημοτικής ΕκπαίδευσηςΕκπαίδευση για το Περιβάλλον και την Αειφόρο Ανάπτυξη
Διεύθυνση Δημοτικής ΕκπαίδευσηςΣχεδιασμός & Τεχνολογία - Ψηφιακές Τεχνολογίες
Διεύθυνση Δημοτικής ΕκπαίδευσηςΦυσικές Επιστήμες
Διεύθυνση Δημοτικής ΕκπαίδευσηςΦυσική Αγωγή
Διεύθυνση Δημοτικής ΕκπαίδευσηςΠροδημοτική Εκπαίδευση
Διεύθυνση Μέσης Γενικής ΕκπαίδευσηςΑγγλικά
Διεύθυνση Μέσης Γενικής ΕκπαίδευσηςΑρχαία Ελληνικά
Διεύθυνση Μέσης Γενικής ΕκπαίδευσηςΒιολογία
Διεύθυνση Μέσης Γενικής ΕκπαίδευσηςΓαλλικά
Διεύθυνση Μέσης Γενικής ΕκπαίδευσηςΓεωγραφία

Δυναμικός πίνακας:
Μέσα από τον Πίνακα Ελέγχου μπορείτε να διαχειρίζεστε δυναμικά τον δυναμικό πίνακα, να προσθέτετε ή να επεξεργάζεστε δεδομένα και να διαμορφώνετε την εμφάνιση μέσω του component Droptables (Περισσότερες πληροφορίες στον οδηγό -  Διαχείριση πινάκων με Droptables - σελ. 33).
Δεν απαιτείται γνώση προγραμματισμού — όλες οι αλλαγές γίνονται εύκολα μέσω ενός φιλικού γραφικού περιβάλλοντος.
Copyright © 2025 ΓΥΜΝΑΣΙΟ ΑΓΙΟΥ ΑΝΤΩΝΙΟΥ
Σχεδιασμός & Ανάπτυξη: Υπηρεσία Διαδικτύου και Επικοινωνίας – ΥΠΑΝ
Σχεδιασμός & Ανάπτυξη: Υπηρεσία Διαδικτύου και Επικοινωνίας - Υπουργείο Παιδείας, Αθλητισμού και Νεολαίας