. En conjunto, su código se vería así:
<table><tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
Así es como se vería la tabla en la parte frontal de su sitio web:
Tenga en cuenta que cada columna tiene el ancho justo para que quepa el texto y que no hay bordes que separen una columna o fila de la siguiente. El resultado es desordenado y difícil de leer.
A continuación, veremos algunas formas en que puede hacer que esta tabla sea más fácil de leer.
Edición del borde de la tabla
Las tablas no tienen bordes por defecto. Para agregar bordes, use la propiedad de borde CSS.
Digamos que quiero agregar un borde negro simple alrededor de mi tabla de arriba. Luego, solo necesitaría agregar el siguiente CSS en la sección principal de mi archivo HTML o en mi hoja de estilo externa.
table, th, td {border: 1px solid black;
}
El HTML en la sección del cuerpo del archivo HTML permanecería igual.
Así es como se vería en la parte delantera:
Observe que los bordes alrededor de la tabla, el encabezado de la tabla y las celdas de la tabla están separados entre sí. Para colapsarlos, use la propiedad border-collapse de CSS. Simplemente agregaría esta propiedad a su conjunto de reglas CSS y establecería el valor en «contraer». Así es como se vería su CSS ahora:
table, th, td {border: 1px solid black;
border-collapse: collapse;
}
Una vez más, el HTML sigue siendo el mismo.
Así es como se vería en la parte delantera:
Agregar bordes ya ha ayudado a que esta tabla sea más fácil de leer, pero aún parece congestionada. Veamos cómo podemos agregar más espacios en blanco a esta tabla.
Edición del relleno de la tabla
Como se mencionó anteriormente, las tablas son tan grandes como lo requiere su contenido de manera predeterminada. Entonces, su segundo paso es agregar más espacio alrededor del contenido dentro de las celdas de la tabla. Para hacerlo, utilice el Propiedad de relleno CSS.
Dado que el relleno especifica el espacio entre el contenido de una celda y su borde, solo necesita agregar relleno al encabezado de la tabla y a los elementos de datos de la tabla, no al elemento de la tabla en sí. Eso significa que creará un nuevo conjunto de reglas de CSS que solo usa dos selectores de CSS: th y td. Luego establecería la propiedad de relleno CSS en el valor que desee. A continuación, lo configuraré en 10px.
Así es como se vería el CSS:
table, th, td {border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
El HTML permanece igual.
Así es como se vería en la parte delantera:
La tabla se ve mucho mejor ahora, pero podemos mejorarla al diferenciar el encabezado de las otras celdas. Veamos cómo a continuación.
Edición del encabezado de la tabla
Para que el encabezado de la tabla se destaque, puede hacer algo tan simple como agregar un color de fondo a esas celdas. Solo necesitaría usar el selector de elementos «th» para aplicar propiedades de estilo únicas solo al encabezado.
A continuación, utilizará el mismo CSS que el anterior, pero agregará un tercer conjunto de reglas que contiene la propiedad CSS background-color. A continuación, puede establecer la propiedad en un valor de color específico utilizando un código de color hexadecimal. Para este ejemplo, usaré un código de color hexadecimal para un tono suave de amarillo.
Aquí está el CSS:
table, th, td {border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: #FDDF95;
}
Así es como se vería en la parte delantera:
¡Esta mesa se ve cada vez mejor! Ahora supongamos que desea diseñar una columna en lugar de una fila. Echaremos un vistazo a cómo a continuación.
Edición del ancho de columna de la tabla
Si tuviera que adivinar cómo diseñar una columna, podría pensar que tendría que agregar un atributo de estilo a la celda de cada fila. Eso sería frustrante, ¿verdad? La buena noticia es que no tienes que hacerlo.
Puede usar la etiqueta
en su lugar. Esta etiqueta especifica un grupo de una o más columnas en una tabla para que pueda aplicar CSS a las columnas en lugar de celda por celda.Para crear este grupo, agregaría la etiqueta
a la sección del cuerpo de su archivo HTML. Dentro de esta etiqueta, agregaría una etiqueta para cada columna en su tabla o cada columna que desee diseñar. Así es como se ve el código HTML:
<colgroup><col>
<col>
<col>
</colgroup>
A continuación, puede orientar este grupo de columnas con CSS. Supongamos que no solo desea especificar el relleno, o el espacio entre el contenido de una celda y su borde, sino que también desea especificar el ancho de cada columna. Luego, podría agregar otro conjunto de reglas a su CSS y definir la propiedad de ancho.
Así es como se vería el CSS:
table, th, td {border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: #FDDF95;
}
colgroup {
width: 250px;
}
Así es como se vería el HTML:
<table><colgroup>
<col>
<col>
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
Así es como se vería en la parte delantera:
Supongamos que desea cambiar el ancho de una sola columna, como la columna que contiene las direcciones de correo electrónico. En lugar de agregar CSS interno a la sección principal de su archivo HTML, simplemente puede agregar un atributo de estilo a la tercera etiqueta
en la sección del cuerpo. Dentro de ese atributo, agregaría y especificaría la propiedad de ancho. Así es como se vería la etiqueta:
<colgroup><col>
<col>
<col style="width:300px">
</colgroup>
Así es como se vería en la parte delantera:
Además de cambiar el ancho de columna de una tabla HTML, puede hacer que una celda abarque varias columnas. Veamos cómo.
Intervalo de columnas de la tabla HTML
En algunos casos, tiene sentido que una celda abarque varias columnas. Por ejemplo, una celda de encabezado que titula un grupo de columnas debe abarcar más de una columna.
Para hacer que una celda abarque más de una columna, puede usar el atributo colspan. Simplemente agréguelo a la etiqueta de apertura del encabezado de la tabla (o una celda de la tabla) y configúrelo en la cantidad de columnas que desea que abarque.
Para el siguiente ejemplo, supongamos que le gustaría agregar a la tabla el número de teléfono celular y de casa de los miembros de su personal. En ese caso, agregaría una nueva etiqueta
con un atributo colspan establecido en «2». Luego, agregaría dos etiquetas | más que contienen los números de teléfono de los empleados en cada fila. Nota: usaremos el mismo CSS del ejemplo anterior. Así es como se vería el HTML:
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
<td>888-888-880</td>
<td>888-888-881</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
<td>888-888-882</td>
<td>888-888-883</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
<td>888-888-884</td>
<td>888-888-885</td>
</tr>
</table>
Así es como se vería en la parte delantera: 
Ahora que ha cambiado el relleno, el ancho de columna, la alineación y más de su tabla, es posible que esté buscando algunas formas más de hacer que su tabla se destaque en la página. Una forma es cambiar el color de fondo no solo del encabezado sino de toda la tabla. Repasemos cómo.
Edición del color de fondo de la tablaPara cambiar el color de fondo de toda la tabla, no solo el encabezado de la tabla, simplemente defina la propiedad de color de fondo CSS para el encabezado de la tabla y los elementos de datos de la tabla. Así es como se vería su CSS:
table, th, td {border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; background-color: #FDDF95; } Así es como se vería el HTML:
<table>
<colgroup>
<col>
<col>
<col style="width:300px">
</colgroup>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
Así es como se vería en la parte delantera: Si tu… |
