Prefacio
La tabla es una de las herramientas más utilizadas en la creación de páginas web. Al crear una página web, el uso de tablas puede organizar los datos con mayor claridad. Pero en el proceso de producción real, la tabla se usa más para el posicionamiento del diseño de la página web. Muchas páginas web se presentan en tablas. Esto se debe a que la tabla tiene una función importante en el control de posición de texto e imágenes.
1. La estructura básica del formulario
La tabla se compone de tres partes: fila, columna y celda, y generalmente se crea mediante tres etiquetas, a saber, etiqueta de tabla <table>, etiqueta de fila <tr>y etiqueta de celda <td>. Los diversos atributos de la tabla son válidos solo entre la etiqueta inicial de la <table>tabla y la etiqueta final de la tabla </table>.
Crea los cuatro elementos de la tabla:
tabla 、 tr 、 th 、 td
<tabel>...</table>: Toda la tabla <table>comienza y </table>termina con una marca .
<tr>...</tr>: Una fila de la tabla, por lo que si hay varios pares <tr></td>, la tabla tiene varias filas.
<td>...</td>: Una celda de la tabla contiene varios pares <td></td>en una fila, lo que indica que hay varias columnas en una fila.
<th></th>: Una celda en el encabezado de la tabla, el encabezado de la tabla.
El número de columnas en la tabla depende del número de celdas de datos en una fila
<table>
<tr>
<th>动物名称</th>
<th>物种</th>
<th>生活习性</th>
<th>食性</th>
</tr>
<tr>
<td>老虎</td>
<td>猫科动物</td>
<td>单独活动</td>
<td>肉食</td>
</tr>
<tr>
<td>狮子</td>
<td>猫科动物</td>
<td>集群</td>
<td>肉食</td>
</tr>
<tr>
<td>大象</td>
<td>哺乳纲动物</td>
<td>群居</td>
<td>草食</td>
</tr>
</table>
El contenido es solo para referencia y su autenticidad no está garantizada.
Atributos de la tabla
Leyenda del título de la tabla
Una tabla solo puede tener un título
<table></table>Agregar entre el código anterior<caption>动物世界</caption>
Ancho y alto de la mesa
El ancho de la mesa es width, la altura esheight
La sintaxis es<table width="500" height="130">
Las siguientes funciones son similares a esto y no se muestrearán
Alineación del encabezado de la tabla
La sintaxis es<table align="对齐方式">
Complete el valor del atributo correspondiente en la alineación:
izquierda: alineado a la izquierda
centro: centrado
derecha: alineado a la derecha
Ancho del borde de la tabla
Cuando el valor del borde no se establece o se establece en 0, la pantalla no tiene bordes
La sintaxis es <table border="5">, 5 es el ancho del borde
Color del borde
La sintaxis es <table bordercolor="#66ccff">, el código específico correspondiente a cada color se puede encontrar en Internet
Espacio entre celdas del marco interior de la mesa
La propiedad de ancho del marco interior de la tabla se utiliza para establecer el espacio entre cada celda de la tabla.
La sintaxis es<table cellspacing="内框宽度值">
Relleno de celdas de margen de borde y texto de tabla
De forma predeterminada, el contenido de la celda estará cerca del borde de la tabla, que se verá muy abarrotado, y la distancia entre ellos se puede establecer mediante el método de palabras.
La sintaxis es<table cellspadding="文字与边框距离值">
Color de fondo de la tabla bgcolor
La sintaxis es<table bgcolor="7fffaa">
Fondo de imagen de fondo de mesa
La sintaxis es<table background="图片链接">
Cabeza de mesa marca thead
La etiqueta de inicio del estilo de encabezado es <thead>y la etiqueta de finalización es </thead>. Se utiliza para definir el estilo de la parte superior de la tabla, puede configurar el color de fondo, la alineación del texto, el modo vertical del texto, etc.
Etiqueta de cuerpo de tabla tbody
La marca del cuerpo de la mesa es similar a la marca del cabezal de la mesa. El estilo del cuerpo de la mesa se utiliza para diseñar uniformemente el estilo de la parte principal de la mesa, marcado como<tbody>
Tfoot
<tfoot>Se utiliza para definir el estilo del pie de página.
Atributo de fila
Configuración de atributos de fila de tabla
La configuración de los atributos de fila en la tabla es similar a la de la tabla. Solo necesita agregar valores de atributo relevantes a las etiquetas de fila, como <tr width="5" height="3" align="content" bordercolor="#66ccff" cellspacing="3">
múltiples valores de parámetros separados por espacios
Alineación de filas de la tabla
Además de la alineación horizontal descrita en la alineación del encabezado anterior, la alineación de filas en la tabla aligntambién tiene alineación verticalvalign
La sintaxis es<tr valign="对齐方式">
Se puede proporcionar tres topvalores: middle,,bottom
valignTambién se puede utilizar para propiedades celulares.
Propiedades de la celda
Tamaño de celda
La sintaxis es<td width="8" height="5">
Colspan de luz horizontal
Al diseñar una tabla, a veces es necesario combinar dos o más celdas adyacentes en una celda
La sintaxis es<td colspan="跨度的列数">
Envergadura de tramo vertical
Además de abarcar columnas en dirección horizontal, las celdas también pueden abarcar filas en dirección vertical
La sintaxis es<td rowspan="跨度的行数">
Da un fragmento de código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<table width="500" height="300" align="content" border="5" bordercolor="#66ccff" cellspacing="3" bgcolor="7fffaa">
<caption>动物世界</caption>
<tr>
<th>动物名称</th>
<th>物种</th>
<th>生活习性</th>
<th>食性</th>
</tr>
<tr align="center">
<td>老虎</td>
<td>猫科动物</td>
<td>单独活动</td>
<td rowspan="2">肉食</td>
</tr>
<tr align="center">
<td>狮子</td>
<td>猫科动物</td>
<td>集群</td>
</tr>
<tr align="center">
<td>大象</td>
<td>哺乳纲动物</td>
<td>群居</td>
<td>草食</td>
</tr>
</table>
</body>
</html>
