Composición de la tabla HTML:
Por <table>etiquetas y una o más <tr>, <th>o <td>etiquetas:
-
<table>Etiqueta: se utiliza para definir la tabla, toda la tabla está contenida en la<table></table>etiqueta; -
<tr>Etiqueta: Se utiliza para definir una fila en la tabla, es un contenedor de celda, cada fila puede contener múltiples celdas, representadas por una<tr></tr>etiqueta; -
<td>Etiquetas y<th>etiquetas: se utilizan para definir celdas, todas las celdas están en<th>etiquetas, cada celda está representada por un par de<td></td>etiquetas o un par de<th></th>etiquetas, y el contenido específico de la tabla se coloca en este par de<td>etiquetas o<th>etiquetas, donde la etiqueta El contenido in se muestra en negrita y centrado de forma predeterminada.
La sintaxis es la siguiente:
<table>
<tr>
<th>1行1列的内容</th>
<th>1行2列的内容</th>
…
</tr>
<tr>
<td>2行1列的内容</td>
<td>2行2列的内容</td>
…
</tr>
…
</table>
<table>Sí<tr>etiqueta superior;<tr>Debe estar en uno<table></table>, no se puede usar solo, equivalente a<table>la etiqueta de atributo;<table>Marque una tabla,<tr>marque una fila en el medio de la tabla,<td>、<th>marque una columna en una fila, debe estar anidada en el medio;
atributos de etiqueta de tabla:
1) Atributo de etiqueta de borde: establezca el ancho del borde alrededor de la mesa. De hecho, la propiedad de la etiqueta de borde no solo establece el ancho del borde alrededor de la tabla, sino que también agrega un borde de 1 px de ancho a cada celda;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border标签属性</title>
<style>
table{
border: 15px solid #000;
}
th,td{
border: 1px solid #000;
}
</style>
</head>
<body>
<table >
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
2) atributo de etiqueta de ancho: establezca el ancho de la tabla; no se recomienda establecer el ancho de la tabla a través del atributo de etiqueta de ancho, se recomienda agregar un atributo de estilo de ancho a la etiqueta de la tabla para establecerlo.
- px: establezca el ancho en píxeles (por ejemplo: ancho = "100 px")
- %: Establezca el ancho en función del porcentaje del elemento contenido (ejemplo: ancho = "100%")
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>width标签属性</title>
<style>
table{
width:"80%"；
}
</style>
</head>
<body>
<table border="15px">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
3) atributo de etiqueta de alineación: especifique la alineación de la tabla en relación con las etiquetas circundantes, se recomienda agregar un atributo de estilo a la etiqueta de la tabla para su configuración;
El valor de la propiedad:
- izquierda: tabla alineada a la izquierda
- derecha: alinea la mesa a la derecha
- centro: alinea la mesa en el centro
(1) Realice la alineación de izquierda a derecha a través de los atributos de estilo flotante;
- izquierda: el elemento flota a la izquierda
- derecha: el elemento flota a la derecha
- ninguno: el valor predeterminado, el elemento no flota
- heredar: especifica que el valor del atributo flotante debe heredarse del elemento principal
(2) Lograr la alineación central a través de los atributos de estilo de margen;
- margen: 0 automático;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align标签属性</title>
<style>
table{
margin: 0 auto；
}
</style>
</head>
<body>
<table border="15px" width="80%">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
4) Atributo de etiqueta de espacio de celda: establezca el espacio entre celdas (unidad: px), se recomienda agregar un atributo de estilo de espacio de borde a la etiqueta de la tabla para su configuración;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cellspacing标签属性</title>
<style>
table{
border-spacing: 0；
}
</style>
</head>
<body>
<table border="15px" width= "80%">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
5) Atributo de etiqueta de relleno de celda: establezca la distancia entre el borde de la celda y el contenido de la celda (unidad: px), se recomienda agregar atributos de estilo de relleno a la etiqueta td o th para lograrlo;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cellspacing标签属性</title>
<style>
table{
padding: 8px；
}
</style>
</head>
<body>
<table border="15px" width= "80%" cellspacing="0">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
6) atributo de etiqueta bgcolor: establece el color de fondo de la tabla;
- color_name: especifica el valor del color como el color de fondo del nombre del color
- hex_number: especifica el color de fondo del valor de color hexadecimal
- rgb_number: el valor de color especificado es el color de fondo del código rgb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bgcolor标签属性</title>
<style>
table{
background-color: "red"；
}
</style>
</head>
<body>
<table border="15px" width= "80%" cellspacing="0">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
7) Propiedad de estilo de contracción de borde: establezca si el borde de la tabla se fusiona en un solo borde;
- separado: el valor predeterminado, el borde estará separado;
- colapso: los bordes se fusionarán en un solo borde;
- heredar: especifica que el valor del atributo border-collapse debe heredarse del elemento padre; por
ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-collapse样式属性</title>
<style>
table{
font: 12px;/*字体大小*/
padding:10px;/*单元格边框与内容之间的间距*/
border: 1px solid #000;/*表格边框*/
}
</style>
</head>
<body>
<table style= border-collapse："collapse;">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
Complete una tabla con atributos de etiqueta:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid black;
width: 20%;
/*float:right;*/
margin: 0 auto;
border-spacing:0 ;
background-color: red;
border-collapse: collapse;
}
td{
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table >
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
</table>
</body>
</html>
Atributos de etiqueta:
1) atributo de etiqueta de alineación: establece la alineación horizontal del contenido de la celda en la fila de la tabla;
- izquierda: contenido alineado a la izquierda (valor predeterminado)
- derecha: alinea el contenido a la derecha
- centro: alinea el contenido en el centro (el valor predeterminado del elemento th)
- justificar: estire las líneas para que cada línea pueda tener la misma longitud
- char: alinea el contenido con el carácter especificado
2) atributo de etiqueta de valor: establece la alineación vertical del contenido de la celda en la fila de la tabla;
- top: top alinea el contenido
- medio: alinea el contenido en el centro (valor predeterminado)
- bottom: bottom alinea el contenido
- línea de base: alinear con la línea de base
3) atributo de etiqueta bgcolor: establece el color de fondo de la fila de la tabla
- color_name: especifica el valor del color como el color de fondo del nombre del color
- hex_number: especifica el color de fondo del valor de color hexadecimal
- rgb_number: el valor de color especificado es el color de fondo del código rgb
Ejemplo:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid black;
width: 20%;
/*float:right;*/
margin: 0 auto;
border-spacing:0 ;
background-color: red;
border-collapse: collapse;
}
tr{
height: 50px;
text-align: center;
vertical-align: top;
background-color: salmon;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<table >
<tr valign="top">
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
</table>
</body>
</html>
<th>Y <td>atributos de etiqueta:
1) Atributo de etiqueta de ancho y atributo de etiqueta de altura: establezca el ancho y la altura de la celda
- píxeles: establezca el ancho en píxeles (por ejemplo: ancho = "100 px")
- porcentaje: establezca el ancho en función del porcentaje del elemento contenido (por ejemplo: ancho = "100%")
2) atributo de etiqueta bgcolor: establece el color de fondo de la celda
- color_name: especifica el valor del color como el color de fondo del nombre del color
- hex_number: especifica el color de fondo del valor de color hexadecimal
- rgb_number: el valor de color especificado es el color de fondo del código rgb
3) atributo de etiqueta de alineación: establece la alineación horizontal del contenido de la celda
- izquierda: contenido alineado a la izquierda (valor predeterminado)
- derecha: alinea el contenido a la derecha
- centro: alinea el contenido en el centro (el valor predeterminado del elemento th)
- justificar: estire las líneas para que cada línea pueda tener la misma longitud
- char: alinea el contenido con el carácter especificado
4) atributo de etiqueta valign: establece la alineación vertical del contenido de la celda
- top: top alinea el contenido
- medio: alinea el contenido en el centro (valor predeterminado)
- bottom: bottom alinea el contenido
- línea de base: alinear con la línea de base
5) atributo de estilo colspan: establece cuántas columnas abarca la celda.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>colspan标签属性</title>
<style>
#title {
text-align: center；
font-weight: bold;
}
</style>
</head>
<body>
<table border="15px" width= "80%" cellspacing="0">
<tr>
<td colspan="3" id="title"></td>
</tr>
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
6) Atributo de estilo Rowspan: establezca cuántas filas abarca la celda
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rowspan标签属性</title>
</head>
<body>
<table border="15px" width= "30%" cellspacing="0">
<tr>
<td colspan="4" style="text-align: center;">上午</td>
<td>语文</td>
</tr>
<tr>
<td> 化学</td>
</tr>
<tr>
<td> 历史</td>
</tr>
<tr>
<td> 政治</td>
</tr>
</table>
</body>
</html>
7) Atributo de etiqueta Nowrap: establezca si el contenido de la celda se ajusta o no.
Utilice el conocimiento de la tabla para completar las siguientes operaciones:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nowrap标签属性</title>
</head>
<body>
<table border="1px" width= "100%" cellspacing="0">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 地址</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td nowrap="nowrap">北京市海淀区 </td>
</tr>
</table>
</body>
</html>