Partage de technologie

[Introduction au HTML] Leçon 10 - Tableau, c'est-à-dire balise table

2024-07-12

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

Dans cette section, nous parlons de tableaux en HTML. Par exemple, nous voyons souvent des bulletins scolaires, comme Excel cellule par cellule. Ce sont tous des tableaux.

Le nom de l'étiquette de la table est tableau 。

Table des matières

1 Quelques sous-balises dans le tableau

1.1 Zone d'en-tête

1.2 Zone de contenu du tableau

1.3 Lignes et colonnes

2 Un peu de pratique

2.1 Faire une transcription simple

2.2 Ajouter des lignes de bordure

2.3 Traversée

2.4 Traversée de colonnes

1 Quelques sous-balises dans le tableau

1.1 Zone d'en-tête

Par exemple, sur une transcription, il doit y avoir un titre en hautCarte d'étudiant、nom d'étudiant、sujet、score、Résultat globalCes champs, c'est vrai.

Ces champs seront placés dans l'en-tête du tableau, ce qui nécessite une balise thead.

1.2 Zone de contenu du tableau

Ensuite, la zone de contenu du tableau a besoin de données plus détaillées. Par exemple, le numéro d'étudiant est 001, le nom est Zhang San, la matière est les mathématiques et le score est de 80. S'il n'y a pas d'autres matières, le score total est de 80. Si il y en a d'autres. Quant aux sujets, additionnez-les, non ?

Ce contenu sera placé dans la zone de contenu du tableau, ce qui nécessite une balise tbody.

1.3 Lignes et colonnes

Les tableaux sont divisés en rangées et en rangées, puis découpés en colonnes et en colonnes. Une fois la découpe terminée, chaque pièce devient une cellule, un petit carré et un petit carré.

A noter par ailleurs :Les lignes contiennent des colonnes, il faut s'en souvenir。

Le nom de l'étiquette de ligne est tr  。

L'étiquette de cellule dans l'en-tête est ème , l'étiquette de cellule de la zone du corps du tableau esttd 。

2 Un peu de pratique

2.1 Faire une transcription simple

  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 Ajouter des lignes de bordure

Cet affichage est un peu brouillon, donc l'ajout de lignes de bordure donne une meilleure apparence au tableau.Vous pouvez en ajouter unbordure="1" Pour les paramètres d'attribut, examinez le code ci-dessous, puis actualisez la page Web pour voir si elle est bien meilleure.

  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 Traversée

Bien sûr, nous pouvons également créer un affichage croisé. Par exemple, Zhang San et Li Si sont de la classe 1, placez-les sur la même rangée, puis les élèves de la classe 1 occupent 2 rangées.

Ajoutez ensuite une classe 2, avec Wang Wu et Zhao Liu dans la classe, et laissez-les occuper une grande rangée, de sorte que la classe 2 ait deux petites rangées.

Ce qui doit être défini ici portée de ligne Les attributs.

  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>

En regardant le code ci-dessus, nous définissons l'attribut rowspan pour la cellule td, puis c'est également la deuxième cellule de classe 1, il n'est donc pas nécessaire d'ajouter le même code td.

2.4 Traversée de colonnes

Les colonnes croisées font référence à plusieurs colonnes ayant les mêmes caractéristiques, il suffit donc d'afficher les informations d'une colonne. Tout comme le croisement de lignes tout à l'heure, le but n'est pas que Zhang San et Li Si soient tous deux en classe 1, donc afin d'éviter un affichage redondant, car ils ont tous les mêmes attributs d'information, ils sont tous les deux en classe 1, donc pour afficher la classe 1, il suffit de traverser suffisamment la rangée.

Traverser des colonnes signifie fusionner plusieurs colonnes ensemble. Prenons un exemple.

  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>

Haha, le code ci-dessus,En fait, je n'arrive pas à obtenir l'effet de cette capture d'écran., si vous obtenez le code et constatez qu'il y a un problème, n'oubliez pasdites-moiOh.

Profil personnel

Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.

mes coordonnées

Mail