Notas HTML: ejemplo de combinación de forma de tabla

Resumen: búsqueda en WeChat [ Sanqiao Jun ]
Descripción: esta es una nota de código sobre HTML5

1. Conocimientos teóricos

No

2. Ejemplo de referencia

1. Resultado
Inserte la descripción de la imagen aquí
2. Código

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板</title>
    </head>
    <style>
table{
     
     
    border-collapse:collapse;
    
}
    </style>
    <body>
       <form>
           <table border="1" cellpadding="30">
                <tbody>
                    <tr align="center">
                        <td rowspan="4">总体信息</td>
                        <td colspan="3">用户注册</td>
                    </tr>
                    <tr align="right">
                        <td>用户名:</td>
                        <td><input type="text" value="请输入用户名"></td>
                    </tr>
                    <tr align="right">
                        <td>密码:</td>
                        <td><input type="text" value="请输入密码"></td>
                    </tr>
                    <tr align="center">
                        <td colspan="3">
                            <input type="submit">&nbsp;&nbsp;
                            <input type="reset">
                        </td>
                        
                    </tr>
                </tbody>
           </table>
       </form>
    </body>
</html>

3. Preguntas y respuestas

1. ¿Cómo hacer que las líneas del borde sean sólidas?

table{
    border-collapse:collapse;
    
}

2. ¿Cómo establecer el tamaño del marco?
relleno celular

<table border="1" cellpadding="30" >

3. ¿Cómo hacer que el contenido del texto de la línea sea centro / izquierda / derecha?
alinear

<tr align="center">

4. ¿Cómo fusionar columnas / filas?

<td rowspan="4">总体信息</td>
<td colspan="3">用户注册</td>

5. ¿Cómo agregar espacios?
& nbsp

<input type="submit">&nbsp;&nbsp;
<input type="reset">

No es fácil organizar artículos, si tienes alguna ayuda, por favor dale me gusta y sigue tu apoyo, ¡gracias! Wechat busca [ Sanqiao Jun ] y responde [Seguir] con un paquete de recursos preparado por mí. Actualización continua de seguimiento ~~~

Supongo que te gusta

Origin blog.csdn.net/weixin_46218781/article/details/107785051
Recomendado
Clasificación