τα στοιχεία επικοινωνίας μου
Ταχυδρομείο[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Σε αυτήν την ενότητα, μιλάμε για πίνακες σε HTML. Για παράδειγμα, βλέπουμε συχνά κάρτες αναφοράς μαθητών, όπως το excel κελί προς κελί.
Το όνομα της ετικέτας του πίνακα είναι τραπέζι 。
Πίνακας περιεχομένων
1 Μερικές δευτερεύουσες ετικέτες στον πίνακα
1.2 Περιοχή περιεχομένου πίνακα
2.2 Προσθήκη γραμμών περιγράμματος
Για παράδειγμα, σε μια μεταγραφή, πρέπει να υπάρχει μια επικεφαλίδα στο επάνω μέροςφοιτητική ταυτότητα、όνομα μαθητή、υποκείμενος、σκορ、Συνολικό αποτέλεσμαΑυτά τα πεδία, σωστά.
Αυτά τα πεδία θα τοποθετηθούν στην κεφαλίδα του πίνακα, η οποία απαιτεί μια ετικέτα.
Στη συνέχεια, η περιοχή περιεχομένου του πίνακα χρειάζεται πιο λεπτομερή δεδομένα, για παράδειγμα, ο αριθμός μαθητή είναι 001, το όνομα είναι Zhang San, το θέμα είναι μαθηματικά και η βαθμολογία είναι 80. Εάν δεν υπάρχουν άλλα μαθήματα, η συνολική βαθμολογία είναι 80. υπάρχουν και άλλα Όσον αφορά τα θέματα, αθροίστε τα, σωστά;
Αυτά τα περιεχόμενα θα τοποθετηθούν στην περιοχή περιεχομένου πίνακα, η οποία απαιτεί μια ετικέτα tbody.
Οι πίνακες χωρίζονται σε σειρές και σειρές και μετά κόβονται σε στήλες και στήλες Αφού ολοκληρωθεί η κοπή, κάθε κομμάτι γίνεται ένα κελί, ένα μικρό τετράγωνο και ένα μικρό τετράγωνο.
Επιπλέον, σημειώστε:Οι σειρές περιέχουν στήλες, αυτό πρέπει να το θυμάστε。
Το όνομα της ετικέτας σειράς είναι tr 。
Η ετικέτα κελιού στην κεφαλίδα είναι ου , η ετικέτα κελιού της περιοχής του σώματος του πίνακα είναιtd 。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>我的第一个网页</title>
- <style type="text/css">
-
- </style>
- </head>
- <body>
- <table>
- <thead>
- <tr>
- <th>学号</th>
- <th>姓名</th>
- <th>语文成绩</th>
- <th>数学成绩</th>
- <th>HTML成绩</th>
- <th>总成绩</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>张三</td>
- <td>80</td>
- <td>90</td>
- <td>96</td>
- <td>266</td>
- </tr>
- <tr>
- <td>2</td>
- <td>李四</td>
- <td>71</td>
- <td>80</td>
- <td>100</td>
- <td>251</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
Αυτή η οθόνη είναι λίγο ακατάστατη, επομένως η προσθήκη γραμμών περιγράμματος κάνει τον πίνακα να φαίνεται καλύτερος.Μπορείτε να προσθέσετε ένασύνορα = "1" Για ρυθμίσεις χαρακτηριστικών, δείτε τον παρακάτω κώδικα και, στη συνέχεια, ανανεώστε την ιστοσελίδα για να δείτε αν φαίνεται πολύ καλύτερη.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>我的第一个网页</title>
- <style type="text/css">
-
- </style>
- </head>
- <body>
- <table border="1">
- <thead>
- <tr>
- <th>学号</th>
- <th>姓名</th>
- <th>语文成绩</th>
- <th>数学成绩</th>
- <th>HTML成绩</th>
- <th>总成绩</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>张三</td>
- <td>80</td>
- <td>90</td>
- <td>96</td>
- <td>266</td>
- </tr>
- <tr>
- <td>2</td>
- <td>李四</td>
- <td>71</td>
- <td>80</td>
- <td>100</td>
- <td>251</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
Φυσικά, μπορούμε επίσης να δημιουργήσουμε μια οθόνη σταυροειδών σειρών Για παράδειγμα, οι Zhang San και Li Si είναι από την Τάξη 1, να τους βάλουμε στην ίδια σειρά και μετά οι μαθητές από την Τάξη 1 καταλαμβάνουν 2 σειρές.
Στη συνέχεια, προσθέστε μια κλάση 2, με τους Wang Wu και Zhao Liu στην τάξη, και αφήστε τους να καταλάβουν μια μεγάλη σειρά, έτσι ώστε η τάξη 2 να έχει δύο μικρές σειρές.
Τι πρέπει να ρυθμιστεί εδώ εύρος σειρών Γνωρίσματα.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>我的第一个网页</title>
- <style type="text/css">
-
- </style>
- </head>
- <body>
- <table border="1">
- <thead>
- <tr>
- <th>学号</th>
- <th>班级</th>
- <th>姓名</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td rowspan="2">1班</td>
- <td>张三</td>
- </tr>
- <tr>
- <td>2</td>
- <td>李四</td>
- </tr>
- <tr>
- <td>3</td>
- <td rowspan="2">2班</td>
- <td>王五</td>
- </tr>
- <tr>
- <td>4</td>
- <td>赵六</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
Βλέποντας τον παραπάνω κώδικα, ορίσαμε το χαρακτηριστικό rowspan για το κελί td και, στη συνέχεια, είναι επίσης το δεύτερο κελί της κλάσης 1, επομένως δεν χρειάζεται να προσθέσουμε τον ίδιο κώδικα td.
Η διασταυρούμενη στήλη αναφέρεται σε πολλές στήλες με τα ίδια χαρακτηριστικά, επομένως αρκεί να εμφανιστούν πληροφορίες μιας στήλης. Ακριβώς όπως η διασταύρωση των σειρών μόλις τώρα, ο σκοπός δεν είναι ότι τόσο ο Zhang San όσο και ο Li Si βρίσκονται στην Κλάση 1, επομένως για να αποφευχθεί η περιττή εμφάνιση, επειδή έχουν όλα τα ίδια χαρακτηριστικά πληροφοριών, είναι και τα δύο Κατηγορία 1. εμφανίστε την Κλάση 1, απλώς διασχίστε τη σειρά.
Διασταύρωση στηλών σημαίνει συγχώνευση πολλών στηλών μαζί. Ας πάρουμε ένα παράδειγμα.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>我的第一个网页</title>
- <style type="text/css">
-
- </style>
- </head>
- <body>
- <table border="1">
- <thead>
- <tr>
- <th>学号</th>
- <th>班级</th>
- <th>姓名</th>
- <th>成绩</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td rowspan="2">1班</td>
- <td>张三</td>
- <td>90</td>
- </tr>
- <tr>
- <td>2</td>
- <td>李四</td>
- <td>80</td>
- </tr>
- <tr>
- <td colspan="4">1班总人数:2,总成绩:170</td>
- </tr>
- <tr>
- <td>3</td>
- <td rowspan="2">2班</td>
- <td>王五</td>
- <td>70</td>
- </tr>
- <tr>
- <td>4</td>
- <td>赵六</td>
- <td>100</td>
- </tr>
- <tr>
- <td>4</td>
- <td>冯七</td>
- <td>75</td>
- </tr>
- <tr>
- <td colspan="4">2班总人数:3,总成绩:245</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
Χαχα, ο παραπάνω κωδικός,Στην πραγματικότητα, δεν μπορώ να έχω το αποτέλεσμα αυτού του στιγμιότυπου οθόνης., εάν λάβετε τον κωδικό και διαπιστώσετε ότι υπάρχει πρόβλημα, θυμηθείτεπες μουω.