Etiquetas de tabla Las<table>
tablas HTML se componen de filas y columnas. La siguiente tabla del curso es una tabla común, que se puede escribir utilizando etiquetas de tabla.
Las tablas HTML se <table></table>definen mediante <tr></tr>etiquetas, las filas de la tabla se definen mediante <td></td>etiquetas y las columnas de la tabla se representan mediante etiquetas. Cabe señalar <table>que generalmente solo la <tr>etiqueta se almacena en la etiqueta, <tr>generalmente solo la <td>etiqueta se coloca en la etiqueta y <td>otras cajas se pueden colocar en la etiqueta. El formato de sintaxis es el siguiente:
<table>
<!-- 这是第一行 -->
<tr>
<td>这是第一行的第一列</td>
<td>这是第一行的第二列</td>
...
</tr>
<!-- 这是第二行-->
<tr>
<td>这是第二行的第一列</td>
<td>这是第二行的第二列</td>
</tr>
...
</table>
Etiqueta de tabla <table>Atributos comunes
ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<h3>下面是一个3 行3 列的表格</h3>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</table>
</body>
</html>
Después de abrirlo con un navegador, tiene el siguiente aspecto:
Etiqueta del encabezado de la<th>
tabla El encabezado de la tabla generalmente se encuentra en la primera fila o columna de la tabla, y su texto aparecerá automáticamente en negrita y centrado, como se muestra en la siguiente figura:
Para configurar el encabezado, simplemente <th></th>reemplace la etiqueta de celda correspondiente con la etiqueta del encabezado <td></td>.
Establecimos la primera línea en el ejemplo anterior como encabezado, y el código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<h3>下面是一个3 行3 列的表格</h3>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</table>
</body>
</html>
El efecto es el siguiente, espere a que el texto de una línea se ponga en negrita y se centre automáticamente:
La estructura de la tabla La estructura de la
tabla se puede dividir en encabezado <thead>, cuerpo <tbody>y pie de página<tfoot>。
Cabe señalar que el pie de página tiene problemas de compatibilidad, y los diferentes navegadores admiten de manera diferente, por lo que no introduciremos mucho el pie de página, aquí solo se introducen el encabezado y los temas.
La estructura de la tabla se divide de la siguiente manera:
Agregaremos el encabezado y sujeto al ejemplo anterior, para que la estructura del código sea más clara:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<h3>下面是一个3 行3 列的表格</h3>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<!-- 表格头部-->
<thead>
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table>
</body>
</html>
Abra con un navegador como se muestra a continuación:
Etiqueta de<caption>
título de tabla El título de la tabla se usa para describir una tabla, pertenece a una parte de la tabla y se encuentra directamente encima de la tabla. Como sigue:
La etiqueta del título está <caption></caption>representada por y está escrita dentro de la <table></table>etiqueta.
Por ejemplo, lo haremos
La etiqueta se cambia a la etiqueta del título, como se muestra a continuación:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<!-- 标题标签 -->
<caption>下面是一个3 行3 列的表格</caption>
<!-- 表格头部-->
<thead>
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table>
</body>
</html>
El efecto es el siguiente:
Combinar celdas Las celdas de
combinación se dividen en combinación de filas cruzadas y combinación de columnas cruzadas.
Para fusionar celdas, debe utilizar <td>los atributos de las etiquetas. Para fusionar filas, utilice el atributo rowspan y fusionar las columnas para utilizar el atributo colspan. Al fusionar celdas, debe eliminar otras <td>etiquetas redundantes .
Al fusionar filas, mantenga la celda superior y elimine la celda inferior.
Al fusionar columnas, mantenga la celda a la izquierda y elimine la celda de la derecha.
Por ejemplo, queremos fusionar la 2ª fila y la 1ª columna de nuestra tabla con la 3ª fila y la 1ª columna, y luego fusionar la 2ª fila y la 2ª columna con la 2ª fila y la 3ª columna. Como sigue:
el código se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<!-- 标题标签 -->
<caption>单元格合并练习</caption>
<!-- 表格头部-->
<thead>
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td rowspan="2">第2行第1列</td> <!-- rowspan=2 表示当前单元格独自占了2个 -->
<td colspan="2">第2行第2列</td> <!-- colspan=2 表示当前单元格独自占了2个 -->
<!-- <td>第2行第3列</td> --> <!-- 删除 -->
</tr>
<tr>
<!-- <td>第3行第1列</td> --> <!-- 删除 -->
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table>
</body>
</html>
El efecto es el siguiente:
