Condivisione della tecnologia

[Introduzione all'HTML] Lezione 10 - Tabella, cioè tag di tabella

2024-07-12

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

In questa sezione parliamo di tabelle in HTML. Ad esempio, vediamo spesso le pagelle degli studenti, come Excel cella per cella. Queste sono tutte tabelle.

Il nome dell'etichetta della tabella è tavolo 。

Sommario

1 Alcuni sottotag della tabella

1.1 Area dell'intestazione

1.2 Area del contenuto della tabella

1.3 Righe e colonne

2 Un po' di pratica

2.1 Fai una semplice trascrizione

2.2 Aggiungi linee di confine

2.3 Fila incrociata

2.4 Colonne incrociate

1 Alcuni sottotag della tabella

1.1 Area dell'intestazione

Ad esempio, su una trascrizione, deve esserci un titolo in altotessera studentesca、nome dello studente、soggetto、punto、Risultato complessivoQuesti campi, giusto.

Questi campi verranno inseriti nell'intestazione della tabella, che richiede un tag annuncio.

1.2 Area del contenuto della tabella

Quindi l'area del contenuto della tabella necessita di dati più dettagliati. Ad esempio, il numero dello studente è 001, il nome è Zhang San, la materia è matematica e il punteggio è 80. Se non ci sono altre materie, il punteggio totale. è 80. Se ci sono altre materie Per quanto riguarda le materie, sommale, giusto?

Questi contenuti verranno inseriti nell'area del contenuto della tabella, che richiede un tag tbody.

1.3 Righe e colonne

Le tabelle sono divise in righe e righe, quindi tagliate in colonne e colonne. Dopo aver completato il taglio, ogni pezzo diventa una cella, un quadratino e un quadratino.

Inoltre, nota:Le righe contengono colonne, questo dovrebbe essere ricordato。

Il nome dell'etichetta della riga è trasloco  。

L'etichetta della cella nell'intestazione è il , l'etichetta della cella dell'area del corpo della tabella ègiorno lavorativo successivo 。

2 Un po' di pratica

2.1 Fai una semplice trascrizione

  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 Aggiungi linee di confine

Questa visualizzazione è un po' disordinata, quindi l'aggiunta di linee di bordo migliora l'aspetto della tabella.Puoi aggiungerne unobordo="1" Per le impostazioni degli attributi, guarda il codice qui sotto, quindi aggiorna la pagina web per vedere se sembra molto migliore.

  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 Fila incrociata

Naturalmente, possiamo anche creare una visualizzazione a righe incrociate. Ad esempio, Zhang San e Li Si appartengono alla Classe 1, inserirli nella stessa riga, quindi gli studenti della Classe 1 occupano 2 righe.

Quindi aggiungi una classe 2, con Wang Wu e Zhao Liu nella classe, e lascia che occupino una fila grande, in modo che la classe 2 abbia due file piccole.

Cosa deve essere impostato qui filare Attributi.

  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>

Osservando il codice sopra, impostiamo l'attributo rowspan per la cella td, e quindi è anche la seconda cella della classe 1, quindi non è necessario aggiungere lo stesso codice td.

2.4 Colonne incrociate

Colonna incrociata si riferisce a più colonne con le stesse caratteristiche, quindi è sufficiente visualizzare le informazioni di una colonna. Proprio come l'incrocio di file di poco fa, lo scopo non è che sia Zhang San che Li Si siano di Classe 1, quindi per evitare visualizzazioni ridondanti, poiché hanno tutti gli stessi attributi di informazione, sono entrambi di Classe 1, quindi visualizzare la Classe 1, basta attraversare la riga quanto basta.

Incrociare colonne significa unire più colonne insieme. Facciamo un esempio.

  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>

Ahah, il codice sopra,In realtà, non riesco a ottenere l'effetto di questo screenshot., se ottieni il codice e scopri che c'è un problema, ricordaloDimmiOH.

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta