Κοινή χρήση τεχνολογίας

[Εισαγωγή στην HTML] Μάθημα 10 - Πίνακας, δηλαδή ετικέτα πίνακα

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Σε αυτήν την ενότητα, μιλάμε για πίνακες σε HTML. Για παράδειγμα, βλέπουμε συχνά κάρτες αναφοράς μαθητών, όπως το excel κελί προς κελί.

Το όνομα της ετικέτας του πίνακα είναι τραπέζι 。

Πίνακας περιεχομένων

1 Μερικές δευτερεύουσες ετικέτες στον πίνακα

1.1 Περιοχή κεφαλίδας

1.2 Περιοχή περιεχομένου πίνακα

1.3 Γραμμές και στήλες

2 Λίγη εξάσκηση

2.1 Κάντε μια απλή μεταγραφή

2.2 Προσθήκη γραμμών περιγράμματος

2.3 Σταυροσειρά

2.4 Κίονες διασταύρωσης

1 Μερικές δευτερεύουσες ετικέτες στον πίνακα

1.1 Περιοχή κεφαλίδας

Για παράδειγμα, σε μια μεταγραφή, πρέπει να υπάρχει μια επικεφαλίδα στο επάνω μέροςφοιτητική ταυτότητα、όνομα μαθητή、υποκείμενος、σκορ、Συνολικό αποτέλεσμαΑυτά τα πεδία, σωστά.

Αυτά τα πεδία θα τοποθετηθούν στην κεφαλίδα του πίνακα, η οποία απαιτεί μια ετικέτα.

1.2 Περιοχή περιεχομένου πίνακα

Στη συνέχεια, η περιοχή περιεχομένου του πίνακα χρειάζεται πιο λεπτομερή δεδομένα, για παράδειγμα, ο αριθμός μαθητή είναι 001, το όνομα είναι Zhang San, το θέμα είναι μαθηματικά και η βαθμολογία είναι 80. Εάν δεν υπάρχουν άλλα μαθήματα, η συνολική βαθμολογία είναι 80. υπάρχουν και άλλα Όσον αφορά τα θέματα, αθροίστε τα, σωστά;

Αυτά τα περιεχόμενα θα τοποθετηθούν στην περιοχή περιεχομένου πίνακα, η οποία απαιτεί μια ετικέτα tbody.

1.3 Γραμμές και στήλες

Οι πίνακες χωρίζονται σε σειρές και σειρές και μετά κόβονται σε στήλες και στήλες Αφού ολοκληρωθεί η κοπή, κάθε κομμάτι γίνεται ένα κελί, ένα μικρό τετράγωνο και ένα μικρό τετράγωνο.

Επιπλέον, σημειώστε:Οι σειρές περιέχουν στήλες, αυτό πρέπει να το θυμάστε。

Το όνομα της ετικέτας σειράς είναι tr  。

Η ετικέτα κελιού στην κεφαλίδα είναι ου , η ετικέτα κελιού της περιοχής του σώματος του πίνακα είναιtd 。

2 Λίγη εξάσκηση

2.1 Κάντε μια απλή μεταγραφή

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.2 Προσθήκη γραμμών περιγράμματος

Αυτή η οθόνη είναι λίγο ακατάστατη, επομένως η προσθήκη γραμμών περιγράμματος κάνει τον πίνακα να φαίνεται καλύτερος.Μπορείτε να προσθέσετε ένασύνορα = "1" Για ρυθμίσεις χαρακτηριστικών, δείτε τον παρακάτω κώδικα και, στη συνέχεια, ανανεώστε την ιστοσελίδα για να δείτε αν φαίνεται πολύ καλύτερη.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.3 Σταυροσειρά

Φυσικά, μπορούμε επίσης να δημιουργήσουμε μια οθόνη σταυροειδών σειρών Για παράδειγμα, οι Zhang San και Li Si είναι από την Τάξη 1, να τους βάλουμε στην ίδια σειρά και μετά οι μαθητές από την Τάξη 1 καταλαμβάνουν 2 σειρές.

Στη συνέχεια, προσθέστε μια κλάση 2, με τους Wang Wu και Zhao Liu στην τάξη, και αφήστε τους να καταλάβουν μια μεγάλη σειρά, έτσι ώστε η τάξη 2 να έχει δύο μικρές σειρές.

Τι πρέπει να ρυθμιστεί εδώ εύρος σειρών Γνωρίσματα.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                 </tr>
  18.             </thead>
  19.             <tbody>
  20.                 <tr>
  21.                     <td>1</td>
  22.                     <td rowspan="2">1班</td>
  23.                     <td>张三</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>2</td>
  27.                     <td>李四</td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>3</td>
  31.                     <td rowspan="2">2班</td>
  32.                     <td>王五</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41. </html>

Βλέποντας τον παραπάνω κώδικα, ορίσαμε το χαρακτηριστικό rowspan για το κελί td και, στη συνέχεια, είναι επίσης το δεύτερο κελί της κλάσης 1, επομένως δεν χρειάζεται να προσθέσουμε τον ίδιο κώδικα td.

2.4 Κίονες διασταύρωσης

Η διασταυρούμενη στήλη αναφέρεται σε πολλές στήλες με τα ίδια χαρακτηριστικά, επομένως αρκεί να εμφανιστούν πληροφορίες μιας στήλης. Ακριβώς όπως η διασταύρωση των σειρών μόλις τώρα, ο σκοπός δεν είναι ότι τόσο ο Zhang San όσο και ο Li Si βρίσκονται στην Κλάση 1, επομένως για να αποφευχθεί η περιττή εμφάνιση, επειδή έχουν όλα τα ίδια χαρακτηριστικά πληροφοριών, είναι και τα δύο Κατηγορία 1. εμφανίστε την Κλάση 1, απλώς διασχίστε τη σειρά.

Διασταύρωση στηλών σημαίνει συγχώνευση πολλών στηλών μαζί. Ας πάρουμε ένα παράδειγμα.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                     <th>成绩</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>1</td>
  23.                     <td rowspan="2">1班</td>
  24.                     <td>张三</td>
  25.                     <td>90</td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>2</td>
  29.                     <td>李四</td>
  30.                     <td>80</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td colspan="4">1班总人数：2，总成绩：170</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>3</td>
  37.                     <td rowspan="2">2班</td>
  38.                     <td>王五</td>
  39.                     <td>70</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>4</td>
  43.                     <td>赵六</td>
  44.                     <td>100</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td>4</td>
  48.                     <td>冯七</td>
  49.                     <td>75</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td colspan="4">2班总人数：3，总成绩：245</td>
  53.                 </tr>
  54.             </tbody>
  55.         </table>
  56.     </body>
  57. </html>

Χαχα, ο παραπάνω κωδικός,Στην πραγματικότητα, δεν μπορώ να έχω το αποτέλεσμα αυτού του στιγμιότυπου οθόνης., εάν λάβετε τον κωδικό και διαπιστώσετε ότι υπάρχει πρόβλημα, θυμηθείτεπες μουω.

Προσωπικό προφίλ

Έχει αφοσιωθεί στην έρευνα της τεχνολογίας για περισσότερα από 30 χρόνια και είναι ικανός σε διάφορες γλώσσες όπως java, linux, javascript, php, css κ.λπ. Έχει κάνει πολλές συνεισφορές στον τομέα του ανοιχτού κώδικα σταθμός τεκμηρίωσης προγραμματιστή για να μοιραστείτε ορισμένα ζητήματα στην ανάπτυξη τεχνολογίας για μελλοντική αναφορά

τα στοιχεία επικοινωνίας μου

Ταχυδρομείο