Compartir tecnología

[Introducción a HTML] Lección 10: Tabla, es decir, etiqueta de tabla

2024-07-12

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

En esta sección hablamos de tablas en HTML. Por ejemplo, a menudo vemos boletas de calificaciones de los estudiantes, como Excel celda por celda. Todas estas son tablas.

El nombre de la etiqueta de la tabla es mesa 。

Tabla de contenido

1 Algunas subetiquetas en la tabla

1.1 Área de encabezado

1.2 Área de contenido de la tabla

1.3 Filas y columnas

2 Un poco de práctica

2.1 Hacer una transcripción sencilla

2.2 Agregar líneas de borde

2.3 Fila cruzada

2.4 Cruce de columnas

1 Algunas subetiquetas en la tabla

1.1 Área de encabezado

Por ejemplo, en una transcripción, debe haber un título en la parte superior.Identificación del Estudiante、nombre del estudiante、sujeto、puntaje、Resultado generalEstos campos, cierto.

Estos campos se colocarán en el encabezado de la tabla, lo que requiere una etiqueta thead.

1.2 Área de contenido de la tabla

Entonces, el área de contenido de la tabla necesita datos más detallados. Por ejemplo, el número de estudiante es 001, el nombre es Zhang San, la materia es matemáticas y la puntuación es 80. Si no hay otras materias, la puntuación total. es 80. Si hay otras materias En cuanto a materias, súmalas, ¿no?

Estos contenidos se colocarán en el área de contenido de la tabla, que requiere una etiqueta tbody.

1.3 Filas y columnas

Las tablas se dividen en filas y filas, y luego se cortan en columnas y columnas. Una vez completado el corte, cada pieza se convierte en una celda, un cuadrado pequeño y un cuadrado pequeño.

Además, tenga en cuenta:Las filas contienen columnas, esto debe recordarse.。

El nombre de la etiqueta de la fila es es  。

La etiqueta de la celda en el encabezado es El , la etiqueta de celda del área del cuerpo de la tabla estd 。

2 Un poco de práctica

2.1 Hacer una transcripción sencilla

  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 Agregar líneas de borde

Esta visualización es un poco desordenada, por lo que agregar líneas de borde hace que la tabla se vea mejor.Puedes agregar unoborde="1" Para la configuración de atributos, mire el código a continuación y luego actualice la página web para ver si se ve mucho mejor.

  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 cruzada

Por supuesto, también podemos crear una visualización de filas cruzadas. Por ejemplo, Zhang San y Li Si son de la Clase 1, colocarlos en la misma fila y luego los estudiantes de la Clase 1 ocupan 2 filas.

Luego agregue una clase 2, con Wang Wu y Zhao Liu en la clase, y déjelos ocupar una fila grande, de modo que la clase 2 tenga dos filas pequeñas.

¿Qué se debe configurar aquí? intervalo de filas 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>

Mirando el código anterior, configuramos el atributo de extensión de filas para la celda td, y luego también es la segunda celda de la clase 1, por lo que no es necesario agregar el mismo código td.

2.4 Cruce de columnas

La columna cruzada se refiere a varias columnas con las mismas características, por lo que es suficiente mostrar la información de una columna. Al igual que el cruce de filas de ahora, el propósito no es que tanto Zhang San como Li Si estén en la Clase 1, por lo que para evitar una visualización redundante, debido a que todos tienen los mismos atributos de información, ambos son Clase 1, por lo que mostrar Clase 1, simplemente cruce la fila lo suficiente.

Cruzar columnas significa fusionar varias columnas. Tomemos un ejemplo.

  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>

Jaja, el código anterior,En realidad, no puedo obtener el efecto de esta captura de pantalla., si obtienes el código y descubres que hay un problema, recuerdadimeVaya.

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo