Compartilhamento de tecnologia

[Introdução ao HTML] Lição 10 - Tabela, ou seja, tag de tabela

2024-07-12

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

Nesta seção, falamos sobre tabelas em HTML. Por exemplo, muitas vezes vemos boletins de alunos, como o Excel, célula por célula. Todos são tabelas.

O nome do rótulo da tabela é mesa 。

Índice

1 Algumas subtags na tabela

1.1 Área do cabeçalho

1.2 Área de conteúdo da tabela

1.3 Linhas e colunas

2 Um pouco de prática

2.1 Faça uma transcrição simples

2.2 Adicionar linhas de borda

2.3 Linha cruzada

2.4 Colunas cruzadas

1 Algumas subtags na tabela

1.1 Área do cabeçalho

Por exemplo, em uma transcrição, deve haver um título no topoIdentidade estudantil、nome do aluno、assunto、pontuação、Resultado geralEsses campos, certo.

Esses campos serão colocados no cabeçalho da tabela, o que requer uma tag thead.

1.2 Área de conteúdo da tabela

Então, a área de conteúdo da tabela precisa de dados mais detalhados. Por exemplo, o número do aluno é 001, o nome é Zhang San, a disciplina é matemática e a pontuação é 80. Se não houver outras disciplinas, a pontuação total é 80. Se não houver outras disciplinas, a pontuação total é 80. tem outros. Quanto aos assuntos, soma, né?

Esses conteúdos serão colocados na área de conteúdo da tabela, o que requer uma tag tbody.

1.3 Linhas e colunas

As tabelas são divididas em linhas e linhas e depois cortadas em colunas e colunas. Após a conclusão do corte, cada peça se torna uma célula, um pequeno quadrado e um pequeno quadrado.

Além disso, observe:As linhas contêm colunas, isso deve ser lembrado。

O nome do rótulo da linha é tr  。

O rótulo da célula no cabeçalho é º , o rótulo da célula da área do corpo da tabela étd 。

2 Um pouco de prática

2.1 Faça uma transcrição simples

  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 Adicionar linhas de borda

Esta exibição é um pouco confusa, então adicionar linhas de borda melhora a aparência da tabela.Você pode adicionar umborda="1" Para configurações de atributos, observe o código abaixo e atualize a página da web para ver se parece muito melhor.

  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 Linha cruzada

Claro, também podemos criar uma exibição de linhas cruzadas. Por exemplo, Zhang San e Li Si são da Classe 1, colocá-los na mesma linha e, em seguida, os alunos da Classe 1 ocupam 2 linhas.

Em seguida, adicione uma classe 2, com Wang Wu e Zhao Liu na classe, e deixe-os ocupar uma linha grande, de modo que a classe 2 tenha duas linhas pequenas.

O que precisa ser definido aqui Expansão de linha Atributos.

  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>

Observando o código acima, definimos o atributo rowspan para a célula td, e então também é a segunda célula da classe 1, portanto não há necessidade de adicionar o mesmo código td.

2.4 Colunas cruzadas

Coluna cruzada refere-se a várias colunas com as mesmas características, portanto é suficiente exibir as informações de uma coluna. Assim como o cruzamento de linhas agora, o objetivo não é que Zhang San e Li Si estejam na Classe 1, portanto, para evitar exibição redundante, porque todos têm os mesmos atributos de informação, ambos são Classe 1, então para exibir Classe 1, basta cruzar a linha.

Cruzar colunas significa mesclar várias colunas. Vejamos um exemplo.

  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, o código acima,Na verdade, não consigo obter o efeito desta captura de tela., se você obtiver o código e descobrir que há um problema, lembre-sediga-meoh.

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de 30 anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc. estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência