¿Qué es una mesa? Se compone de células celulares. ¡En la tabla, el número de <td> depende del número de celdas celulares envueltas en cada fila <tr>! Además, la tabla predeterminada no se muestra la línea de tabla en el navegador antes de agregar el estilo CSS;
Métodos comunes de escritura de tabla en HTML: A. <tr> ... </tr>: una fila de una tabla, hay varios pares de TR, y hay varias filas; B. <TD>… </td>: una celda de una tabla, que contiene varios pares de <td>… </td>, lo que significa que hay varias columnas en una fila; C. <th> ... </th>: una celda en la cabeza de la tabla, el encabezado de la tabla, y el texto es audaz y se muestra en el centro; D. <Tabla Summary = Tabla Introducción Texto>/*El contenido del resumen no se mostrará en el navegador. Su función es aumentar la legibilidad (semántica) de la tabla, habilitar los motores de búsqueda para comprender mejor el contenido de la tabla y también permitir a los lectores de pantalla ayudar mejor a los usuarios especiales a leer el contenido de la tabla. */ E. E.Caption Etiqueta, agregue un título y resumen a la tabla, el título se usa para describir el contenido de la tabla, la ubicación de visualización del título: arriba de la tabla
<TABLE BORDER = CELLPACING = CellPadding => <tr> <th> Header </th> </tr> <tr> <td> data </td> </tr> </table>
<TABLE BORDER = CELLPACING = CELLPADDING = SUMMARY => <TITTTION> </TITTION> <TR> <TH> Hoy es viernes </td> </tr> </table>
Volviendo al tema, volvamos al punto en que la diferencia entre Cellpadding y CellPacing es la comparación entre el siguiente conjunto de imágenes de la tabla y el código de poca celda:
<! DocType html> <html> <head> <meta charset = utf-8> <title> Diferencias en la captura celular en la tabla </title> <style type = text/css> table {margin-bottom: 50px; } .ceshi {border-espacio: 20px; /*Especifica la distancia entre los bordes de las celdas adyacentes en una tabla. */} </style> </head> <table width = 600 cellPacing = 0 borderColor =#333 border = 1> <tocktion> Primera celda </tittion> <tr> <tr> <td> test 1 </td> <td> test 2 </td> <td> test 3 <//td> </tr> </table> <libre width = 600 cellpacing borde = 1> <tittion> Segundo celda </tittion> <tr> <tr> <td> prueba 1 </td> <td> prueba 2 </td> <td> test 3 </td> </tr> </table> <table width = 600 borderColor =#333 border = 1 class = ceshi> <titer> tercera celda </caption> <tr> <TD> test 1 </td> test> 2 </td> <td> Test 3 </td> </tr> </table> </html>Al comparar el código, las dos tablas superiores tienen diferentes configuraciones, una es 0 y la otra es 20. El resultado mostrado es que la distancia entre cada celda en la primera tabla es 0, y la distancia entre cada celda en la segunda tabla es 20. Extendida: la segunda tabla es consistente con la tercera tabla, pero la tercera tabla no tiene espacio de celda. Encontramos que este espacio fronterizo: 20px; es lo mismo que el resultado del espacio celular = 20. Resumen de por ejemplo: el atributo de separación de células se usa para especificar la brecha entre las células de la tabla. El valor del parámetro de esta propiedad es un número, lo que indica el número de puntos de píxeles ocupados por la brecha de celda.
<! DocType html> <html> <head> <meta charset = utf-8> <title> Diferencias en el envío celular en las tablas </title> <style tipo = text/css> table {margen-bottom: 50px; } </style> </head> <body> <table width = 600px border = 1 borderColor =#ccc cellPadding = 0> <tr> <th> Soy una tabla celular feliz </th> <th> Soy una mesa celular feliz </th> <th> AM A Happy Cell Table </th> </tr> </table> <Table> <tr> <th> Soy una forma celular feliz </th> <th> Soy una forma celular feliz </th> <th> soy una forma celular feliz </th> <th> Soy una forma celular feliz </th> </tr> </table> </body> </html>A juzgar por el código anterior que ejecuta resultados: las dos tablas tienen diferentes valores de códigos de envío celular. En la primera tabla, las palabras "soy feliz celular" son 0 desde la celda donde se encuentra, es decir, se establece CellPadding = 0; En la segunda tabla, las palabras "soy feliz celda" están lejos de la celda donde se encuentra, es decir, la distancia entre la celda donde estoy feliz es de 20 píxeles. En pocas palabras, ¿cuánto es el valor del envío celular igual, cuántos espacios en blanco quedan hacia adentro desde el límite de las celdas en la tabla, y los elementos en la celda nunca entrarán en esos espacios en blanco? || Tenga en cuenta que la propiedad de CellPadding se usa para especificar el tamaño de la distancia en blanco entre el contenido de la celda y el límite de la celda. El valor del parámetro de esta propiedad también es un número, lo que indica el número de píxeles ocupados por la altura de la distancia en blanco entre el contenido de la celda y los límites superior e inferior y el número de píxeles ocupados por el ancho de la distancia en blanco entre el contenido de la celda y los límites izquierdo y derecho.
Resumen de por ejemplo: la matrícula celular representa la distancia entre las células, la captura celular representa la distancia entre el contenido de la celda y el borde; El primero es como el margen, el segundo es como el relleno; Nido (célula): el contenido de la tabla; Llenado de nido (llenado de la mesa) (pinchazo de celda) representa una distancia fuera del nido, utilizada para separar el espacio de nido y nido; Espacio de nido (espaciado de mesa): representa la distancia entre el borde de la mesa y el relleno de nido, y también es la distancia entre el relleno de nido
Expansión 1: ¿Cómo fusionar filas y columnas de una tabla? COLSPAN Cross-Column Merge, Rowspan cruzada cruzada Fusion
Pantalla de código:
<! DocType html> <html> <head> <meta charset = utf-8> <title> La diferencia entre colspan y showspan </title> <style tipo = text/css> table {margin: 0 auto; margen de fondo: 50px; Text-Align: Center; } </style> </head> <body> <table width = 600 cellPadding = 10 cellPacing = 2 border = 1 borderColor =#ccc> <titerTion> Pantalla normal: una fila y tres columnas </tittertion> <tr> <td> decir algo, no sé </td> <td> decir algo, no sé </td> <td> digo algo, no sé </td </td tt> <Worth Width = 600 CellPadding = 10 CellPacing = 2 border = 1 borderColor =#cc> <titerTion> ¿Qué debo hacer ahora para mostrar una fila y dos columnas? Colspan Cross-Column Merge </titerTion> <tr> <td> Di algo, no sé </td> <td colspan = 2> di algo, no sé </td> <!-<td> diga algo, no sepa </td>-> </tr> </table> <!-!-!-!-! ==================================================================================================================================================================================================================================================================================================. ==================================================================================================================================================================================================================================================================================================. ==================================================================================================================================================================================================================================================================================================. ========================================================================================================== <TD> Diga algo, no sepa </td> </tr> <tr> <tr> <td> diga algo, no sepa </td> <td> diga algo, no sepa </td> <td> diga algo, no sepa </td> </tr> </table> <table width = 600 cellPadding = 10 cellpacing = 2 border = 1 bordercolor =#ccc> <Caption> columnas? ROWSPAN Cross-Row Merge </tocktion> <tr> <td RowsPan = 2> Di algo, no sepa </td> <td> Diga algo, no sepa </td> </tr> <tr> <!-<td> diga algo, no sepa </td>-> <td> diga algo, no sepa </td> </tr> </body> </btml>Expansión 2: ¿Cómo fusionar las fronteras de la mesa? Colapso de borde: colapso;
<!-Celillas de la tabla de fusión-> <style tipo = text/css> table {border-colapse: colapso; /* Border-colapso: separado; * / /*Indica si las bordes de fila y celda de una tabla se unen en un solo borde o se separan como en HTML estándar. */} </style> <table width = 600 cellPadding = 10 cellPacing = 2 border = 1 borderColor =#ccc> <tbody> <tr> <td> celular 1 </td> <td> celular 2 </td> <td> celular 3 </td> </tbody> </table>Finalmente, en el navegador Chrome, la tabla predeterminada del sistema borde de borde gris, el espacio de borde es 2, etc.
/* User Agent Stylesheet* / /* table {display: table; colapso de borde: separado; espaciado fronterizo: 2px; color de borde: gris; } * / / * border = 1 predeterminado es igual a borde = 1px border-top-width: 1px; ancho de derecho fronterizo: 1px; Border-Bottom-Width: 1px; ancho de la izquierda fronteriza: 1px; * / /* BorderColor Devuelve o establece el color del borde del objeto BorderColor: W3C - String especifica el color del borde del elemento. Especifique un nombre de color o código de color RGB. */Este es el artículo sobre los detalles de la diferencia entre Cesllpacing y Cellpadding en la tabla. Para obtener un contenido más relacionado de cesllpacing y celular en tablas, busque artículos anteriores de wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!