Cuando estamos haciendo un formulario HTML
Puedes ver que esto es muy injusto. Esto requiere fusionar celdas.
1. Primero confirme si desea fusionar hacia la derecha (fusión de columnas) o hacia abajo (fusión de filas).
2. Encuentre las celdas que deben fusionarse.
3. Si la celda fusionada tiene contenido u ocupa una posición, la celda fusionada se puede eliminar en el código fuente.
Atención especial :
Cuando fusionamos celdas, si las celdas fusionadas tienen contenido, aunque la fusión no se verá afectada, debido a que el contenido de las celdas fusionadas no se procesa de ninguna manera, las celdas retrocederán automáticamente.
Solución : simplemente elimine las celdas adicionales.
Combinar entre filas: rowspan="Número de celdas combinadas"
Fusionar entre columnas: colspan="Número de celdas fusionadas"
Explicación detallada:
Celda objetivo:
1: Fila cruzada: la celda superior es la celda de destino, escriba el código de combinación.
2: Columnas cruzadas: la celda más a la izquierda es la celda de destino, escriba el código de combinación.
Luego seguimos los pasos principales:
Forma inicial <cuerpo> <table border="1" align="center" width="100%" cellpadding="20" cellspace="0"> <tr> <th>Recopilación de información de estrellas</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th></th> <th>Nombre</th> <th>Género</th> <th>Edad</th> <th>Aficiones</th> </tr> <tr> <td></td> <td>Hermano</td> <td>Hombre</td> <td>24</td> <td>Canta, baila, rapea y juega baloncesto</td> </tr> <tr> <td></td> <td>Litang</td> <td>Hombre</td> <td>20</td> <td>Medición de código y grabado nítido cinco</td> </tr> <tr> <td></td> <td>Menglei</td> <td>Hombre</td> <td>27</td> <td>La famosa espada roba la torre y se convierte en el cazador definitivo</td> </tr> </tabla> </cuerpo>
Esto se muestra como en la imagen de arriba.
Combinación de filas cruzadas (rowspan): si queremos el siguiente efecto, necesitamos usar el atributo de rango de filas
<cuerpo> <table border="1" align="center" width="100%" cellpadding="20" cellspace="0"> <tr> <th rowspan="5">Recopilación de información de estrellas</th><!: de acuerdo con los requisitos, busque el título, escriba el atributo rowpan y escriba el parámetro 5, lo que significa fusionar la primera a la quinta fila. al mismo tiempo, comente la primera columna de cada línea --> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <th></th> --> <th>Nombre</th> <th>Género</th> <th>Edad</th> <th>Aficiones</th> </tr> <tr> <!-- <td></td> --> <td>Hermano</td> <td>Hombre</td> <td>24</td> <td>Canta, baila, rapea y juega baloncesto</td> </tr> <tr> <!-- <td></td> --> <td>Litang</td> <td>Hombre</td> <td>20</td> <td>Medición de código y grabado nítido cinco</td> </tr> <tr> <!-- <td></td> --> <td>Menglei</td> <td>Hombre</td> <td>27</td> <td>La famosa espada roba la torre y se convierte en el cazador definitivo</td> </tr> </tabla> </cuerpo>
Fusión entre columnas (colspan): si queremos el siguiente efecto, debemos usar el atributo colspan
<cuerpo> <table border="1" align="center" width="100%" cellpadding="20" cellspace="0"> <tr> <th colspan="5">Recopilación de información de estrellas</th><!--De acuerdo con los requisitos, busque el título, escriba el atributo colspan y escriba el parámetro 5, lo que significa fusionar la primera a la quinta columna, y al mismo tiempo, comente la primera línea de cada columna --> <!-- <td></td> <td></td> <td></td> <td></td> --> </tr> <tr> <!-- <th></th> --> <th>Nombre</th> <th>Género</th> <th>Edad</th> <th>Aficiones</th> </tr> <tr> <!-- <td></td> --> <td>Hermano</td> <td>Hombre</td> <td>24</td> <td>Canta, baila, rapea y juega baloncesto</td> </tr> <tr> <!-- <td></td> --> <td>Litang</td> <td>Hombre</td> <td>20</td> <td>Medición de código y grabado nítido cinco</td> </tr> <tr> <!-- <td></td> --> <td>Menglei</td> <td>Hombre</td> <td>27</td> <td>La famosa espada roba la torre y se convierte en el cazador definitivo</td> </tr> </tabla> </cuerpo>
Con esto concluye este artículo sobre la implementación específica de la combinación de tablas HTML. Para obtener más contenido relacionado con la combinación de tablas HTML, busque artículos anteriores en downcodes.com o continúe explorando los artículos relevantes a continuación. ¡Espero que admita downcodes en el futuro!