DOCENTE
Se puede profundizar en la edición del estilo de una tabla modificando su código HTML. A lo largo de esta entrada veremos conceptos básicos que se pueden utilizar en las tablas de PoliformaT.
Visualización
Para los ejemplos utilizaremos la siguiente tabla:
El código HTML es el siguiente:
<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%"> <thead> <tr> <th scope="row">F1, C1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> <th scope="col">Columna 4</th> </tr> </thead> <tbody> <tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr> <tr> <th scope="row">Fila 4</th> <td>Celda 07</td> <td>Celda 08</td> <td>Celda 09</td> </tr> </tbody> </table> </div>
Para acceder a la edición HTML de una tabla seguiremos los siguientes pasos:
Existiendo una tabla en el editor de texto, pulsaremos sobre "Fuente HTML".
Veremos el código de la tabla. Si existe más contenido escrito, veremos el código de todo, pero nos vamos a centrar únicamente con el código de la tabla que queremos personalizar. El formato debe ser algo parecido, una etiqueta <table> </table> englobada dentro de la etiqueta <div class="table-responsive"> </div>.
Como podrás notar o ya conocerás, HTML se organiza por etiquetas, las cuales están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. Las etiquetas más utlizadas en una tabla son las siguientes:
| Etiquetas | Descripción |
|---|---|
| <table> | Definición de una tabla. |
| <th> | Definición de cabecera de tabla. El atributo scope que aparece en el ejemplo no es necesario utilizarlo. |
| <tr> | Define una fila en la tabla. |
| <td> | Define una celda en la tabla. |
| <caption> | Define el nombre o título de la tabla. |
| <colgroup> | Especifica un grupo de una o más columnas para aplicar formato. |
| <col> | Especifica las propiedades de una columna de las columnas definidas en un elemento colgroup. |
| <thead> | Define la cabecera de la tabla. |
| <tbody> | Define el cuerpo de la tabla. |
| <tfoot> | Define el pie de la tabla. |
Si observamos la estructura de la tabla de ejemplo, vemos como se configuran filas <tr> </tr> y, dentro de cada fila, se configuran las celdas (ya sean cabecera <th> </th> o normales <td> </td>).
Vamos a aprender a realizar las siguientes acciones mediante código HTML:
Sin conocimientos previos de HTML, es más sencillo utilizar las propiedades que nos ofrece el editor de texto de PoliformaT. Acceda al siguiente enlace para más información: Cómo combinar celdas de una tabla.
Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente que sean de encabezado o normales, es el atributo colspan, el cual permite realizar la combinación de varias columnas en una sola. Para especificar el valor del atributo, se ha de indicar el número de columnas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr>
Modificaciones
<tr> <th scope="row">Fila 2</th> <td colspan="2">Celda 01 y 02</td> <td>Celda 03</td> </tr>
Visualización
Sin conocimientos previos de HTML, es más sencillo utilizar las propiedades que nos ofrece el editor de texto de PoliformaT. Acceda al siguiente enlace para más información: Cómo combinar celdas de una tabla.
Al igual que se puede realizar la combinación de columnas, también se puede realizar la combinación de filas, mediante el atributo rowspan. Para especificar el valor del atributo, se ha de indicar el número de filas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr>
Modificaciones
<tr> <th scope="row">Fila 2</th> <td rowspan="2">Celda 01 y 04</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr> <th scope="row">Fila 3</th> <td>Celda 05</td> <td>Celda 06</td> </tr>
Visualización
Se pueden realizar agrupaciones de columnas para aplicar un formato por separado o en común a las mismas, para realizar estas agrupaciones se ha de utilizar la etiqueta <colgroup>, especificando a continuación como su contenido y mediante la etiqueta <col>, las columnas y el ámbito de las mismas sobre el cual se quiere aplicar el formato. Si nuestra tabla tiene 3 columnas, mediante estas etiquetas podremos configurar, por ejemplo, los anchos de cada una de las columna. El ancho de una columna se define mediante el atributo style con el subatributo width en el interior con el valor numérico del ancho entre comillas. Para que el contenido se adapte a todo tipo de pantallas, se recomienda que los anchos se definan en porcentaje. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%"> <thead>
Modificaciones
<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%"> <colgroup> <col style="width: 30%"/> <col style="width: 17.5%"/> <col style="width: 17.5%"/> <col style="width: 17.5%"/> </colgroup> <thead>
Visualización
También podemos modificar el alto de las filas. El alto de una fila se define mediante el atributo style con el subatributo height en el interior con el valor numérico del alto entre comillas. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr>
Modificaciones
<tr style="height: 100px"> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr style="height: 50px"> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr>
Visualización
Esta opción provoca que se pierda el formato "Tabla estilo cebra" y "Tabla dinámica" de las celdas seleccionadas.
Podemos sombrear una celda o un grupo de celdas indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <td> o <th> de cada celda que queramos sombrear. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr>
Modificaciones
<tr> <th scope="row">Fila 2</th> <td style="background-color: #FAEBD7">Celda 01</td> <td style="background-color: rgb(144, 238, 144)">Celda 02</td> <td>Celda 03</td> </tr>
Visualización
Celda 01 sombreada con el color "antiquewhite" - #FAEBD7 - rgb(250, 235, 215). Celda 02 sombreada con el color "lightgreen" - #90EE90 - rgb(144, 238, 144).
Esta opción provoca que se pierda el formato "Tabla estilo cebra" y "Tabla dinámica" de las filas seleccionadas.
Podemos sombrear una fila o un grupo de filas indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <tr> de cada celda que queramos sombrear. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr>
Modificaciones
<tr style="background-color: #FFA500"> <th scope="row">Fila 2</th> <td>Celda 01</td> <td">Celda 02</td> <td>Celda 03</td> </tr> <tr style="background-color: rgb(255, 192, 203)"> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr>
Visualización
Fila 2 sombreada con el color "orange" - #FFA500 - rgb(255, 165, 0). Fila 3 sombreada con el color "pink" - #FFC0CB - rgb(255, 192, 203).
Esta opción no se visualiza correctamente si "Tabla estilo cebra" está activada.
Podemos sombrear una columna o un grupo de columna indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se hará uso de la etiqueta <colgroup> vista más arriba. Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Modificaciones
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover" style="width:100.0%">
<colgroup>
<col/>
<col style="background-color: #FFFAF0"/>
<col style="background-color: rgb(248, 248, 255)"/>
<col/>
</colgroup>
<thead>
Visualización
Columna 2 sombreada con el color "floralwhite" - #FFFAF0 - rgb(255, 250, 240). Columna 3 sombreada con el color "ghostwhite" - #F8F8FF - rgb(248, 248, 255). Opción "Tabla estilo cebra" desactivada.
Podemos sombrear la tabla entera con el mismo color indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <table>. El atributo style puede contener más de un subatributo, separando cada uno de ellos con un punto y coma ";". Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Modificaciones
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover" style="width:100.0%; background-color: #FFE4E1">
<thead>
Visualización
Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Opción "Tabla estilo cebra" desactivada.
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Modificaciones
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%; background-color: #FFE4E1">
<thead>
Visualización
Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Opción "Tabla estilo cebra" activada.
Podemos añadir un borde exterior que rodee la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se pondrá dentro de la etiqueta <table>. El atributo style puede contener más de un subatributo, separando cada uno de ellos con un punto y coma ";".
El tipo de borde se refiere a cómo será la línea:
| Valor | Descripción |
|---|---|
hidden | Oculto. Idéntico a none, salvo para conflictos con tablas. |
dotted | Establece un borde basado en puntos. |
dashed | Establece un borde basado en rayas (línea discontínua). |
solid | Establece un borde sólido (línea contínua). |
double | Establece un borde doble (dos líneas contínuas). |
groove | Establece un borde biselado con luz desde arriba. |
ridge | Establece un borde biselado con luz desde abajo. Opuesto a groove. |
inset | Establece un borde con profundidad «hacia dentro». |
outset | Establece un borde con profundidad «hacia fuera». Opuesto a inset. |
Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Modificaciones
<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%; border: #FF4500 4px double"> <thead>
Visualización
Tabla rodeada con un borde color "orangered" - #FF4500 - rgb(255, 69, 0), 4px de ancho de borde, tipo de borde "double".
Podemos cambiar los bordes horizontales de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se definirá el estilo dentro de una etiqueta <style> </style>. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px). Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Modificaciones
<style>
table tr {
border: #6A5ACD 2.0px dotted;
}
</style>
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Visualización
Tabla rodeada con un borde color "slateblue" - #6A5ACD - rgb(106, 90, 205), 2px de ancho de borde, tipo de borde "dotted".
Código original
<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%"> <thead> <tr> <th scope="row">F1, C1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> <th scope="col">Columna 4</th> </tr> </thead> <tbody>
Modificaciones
<style>
table tr {
border: #6A5ACD 2.0px dotted;
}
</style>
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<tbody>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
Visualización
Tabla rodeada con un borde color "slateblue" - #6A5ACD - rgb(106, 90, 205), 2px de ancho de borde, tipo de borde "dotted". Cabecera de tabla movida al cuerpo.
Podemos cambiar los bordes verticales de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se hará uso de la etiqueta <colgroup> vista más arriba. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px). Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
Modificaciones
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<colgroup>
<col style="border: #FFFF00 2.0px solid"/>
<col style="border: #FFFF00 2.0px solid"/>
<col style="border: #FFFF00 2.0px solid"/>
<col style="border: #FFFF00 2.0px solid"/>
</colgroup>
<thead>
Visualización
Tabla rodeada con un borde color "yellow" - #FFFF00 - rgb(255, 255, 0), 2px de ancho de borde, tipo de borde "solid".
Esta opción no funcionará si "Tabla con bordes" está activada.
Podemos cambiar los bordes de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se definirá el estilo dentro de una etiqueta <style> </style>. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px).Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%"> <thead> <tr> <th scope="row">F1, C1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> <th scope="col">Columna 4</th> </tr> </thead> <tbody>
Modificaciones
<style>
table td, table th, table tr {
border: #000000 1.1px solid;
}
</style>
<div class="table-responsive">
<table class="table table-condensed
table-hover table-striped" style="width:100.0%">
<tbody>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
Visualización
Tabla rodeada con un borde color "black" - #000000 - rgb(0, 0, 0), 1.1px de ancho de borde, tipo de borde "solid". Cabecera movida al cuerpo. Opción "Tabla con bordes" desactivada.
Esta opción no funcionará si "Tabla con bordes" está activada.
Podemos cambiar los bordes de una o varias celdas indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se pondrá dentro de la etiqueta <td> o <th> de cada celda que queramos cambiar el borde. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px).Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Fila 2</th>
<td>Celda 01</td>
<td>Celda 02</td>
<td>Celda 03</td>
</tr>
Modificaciones
<table class="table table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Fila 2</th>
<td style="border: #6A5ACD 2.0px dotted;">Celda 01</td>
<td style="border: #0000FF 5.0px solid;">Celda 02</td>
<td>Celda 03</td>
</tr>
Visualización
Celda 01 sombreada con el color "slateblue" - #6A5ACD - rgb(106, 90, 205). Celda 02 sombreada con el color "blueblue" - #0000FF - rgb(0, 0, 255). Opción "Tabla con bordes" desactivada.
Código original
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Fila 2</th>
<td>Celda 01</td>
<td>Celda 02</td>
<td>Celda 03</td>
</tr>
Modificaciones
<table class="table table-condensed
table-hover table-striped" style="width:100.0%">
<tbody>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
<tr>
<th scope="row">Fila 2</th>
<td style="border: #6A5ACD 2.0px dotted;">Celda 01</td>
<td style="border: #0000FF 5.0px solid;">Celda 02</td>
<td>Celda 03</td>
</tr>
Visualización
Celda 01 sombreada con el color "slateblue" - #6A5ACD - rgb(106, 90, 205). Celda 02 sombreada con el color "blueblue" - #0000FF - rgb(0, 0, 255). Cabecera movida al cuerpo. Opción "Tabla con bordes" desactivada.
Podemos cambiar las propiedades de fuente de una celda, una fila o una columna, un grupo de celdas, de filas o de columnas o de toda la tabla indicándolo en el atributo style con el subatributo font-style, color (con el color en código HTML o su código RGB (Tabla de colores) en el interior) y font-size con el tamaño indicado en pixeles. Se pondrá dentro de la etiqueta <td>, <th>, <tr> o <table> de cada celda que queramos sombrear.
Los tipos de estilo de fuente que se puede definir mediante font-size son los siguientes:
| Valor | Descripción |
|---|---|
normal | El navegador muestra un estilo de fuente normal. Esto es predeterminado. |
italic | El navegador muestra un estilo de fuente en cursiva. |
oblique | El navegador muestra un estilo de fuente oblicuo. |
Veámoslo con un ejemplo:
Hacemos los siguientes cambios en nuestro código HTML de ejemplo:
Código original
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped" style="width:100.0%">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Fila 2</th>
<td>Celda 01</td>
<td>Celda 02</td>
<td>Celda 03</td>
</tr>
Modificaciones
<div class="table-responsive">
<table class="table table-bordered table-condensed
table-hover table-striped"
style="width:100.0%; color: #5F9EA0">
<thead>
<tr>
<th scope="row">F1, C1</th>
<th scope="col">Columna 2</th>
<th scope="col">Columna 3</th>
<th scope="col">Columna 4</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic">
<th scope="row">Fila 2</th>
<td>Celda 01</td>
<td style="font-size: 25px;">Celda 02</td>
<td style="color: #FF7F50;">Celda 03</td>
</tr>
Visualización
Color de fuente de la tabla "cadetblue" - #5F9EA0 - rgb(95, 158, 160). Fila 2 en itálica. Celda 02 con tamaño de fuente 25px. Celda 03 con color de fuente de la tabla "coral" - #FF7F50 - rgb(255, 127, 80).
Vista general
Herramientas de contenido
Actividad