8 | Una tabla [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
  <td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se establece un fila y sus correspondientes celdas que constituyen las columnas de la tabla. Observar también el mandato bajo el cual la tabla queda centrada en la página, distinguiendo entre centrar la tabla respecto a la página o centrar el texto de una celda dentro de la propia celda. En la anteúltima de las tablas los detalles más señalados son dos: Por una parte los estilos de los bordes en las celdas, y por otro lado la posición de la tabla respecto al margen izquierdo de la página.</div>
  </td>
</tr>
</tbody></table>

<br />
<br />

<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody>
<tr>
  <td>celda (1,1)</td>
  <td><div style="margin-left: 20px;">
      <i>celda (1,2)</i> </div></td>
  <td>celda (1,3)</td>
</tr>
<tr>
  <td>celda (2,1)</td>
  <td><div style="text-align: center;">
      <b>celda (2,2)</b></div></td>
  <td>celda (2,3)</td>
</tr>
</tbody></table>

<div style="margin: 30px;">
<table><tbody>
<tr>
  <td><b>Table cell 1</b></td>
  <td><b>Table cell 2</b></td>
</tr>
<tr>
  <td style="border: 2px solid red;">Table cell 3</td>
  <td style="border: 2px dashed red;">Table cell 4</td>
</tr>
<tr>
  <td style="border: 1px double blue;">Table cell 5</td>
  <td style="border: 3px solid green;">Table cell 6</td></tr>
</tbody></table></div>

<table align="center" border="0" style="background-color: #abebc6; width: 400px;"><tbody>
<tr>
  <td style="border-left: thick solid; border-top: thick solid;">celda (1,1)</td>
  <td style="border-right: thin solid; border-top: thin solid;"><div style="margin-left: 20px;">
     <i>celda (1,2)</i> </div></td>
  <td>celda (1,3)</td>
</tr>
<tr>
  <td style="border-bottom: thin solid; border-right: thin solid;">celda (2,1)</td>
  <td style="border-bottom: thin solid; border-right: thin solid;"><div style="text-align: center;"><b>celda (2,2)</b></div>
  </td>
  <td style="border-bottom-color: initial; border-bottom: thin solid; border-color: initial; border-left-color: currentcolor; border-left: thin solid; border-right-color: currentcolor; border-right: thin solid; border-style: solid; border-top: thin solid; border-width: thin;">celda (2,3)</td>
</tr>
<tr>
  <td style="border-bottom-color: initial; border-color: initial; border-left-color: initial; border-right-color: currentcolor; border-right-style: solid; border-right: thin solid; border-top-style: solid; border-top: thin solid; border-width: thin;">celda (3,1)</td>
  <td style="border-bottom-color: initial; border-bottom: thin dashed; border-color: initial; border-left-color: currentcolor; border-left: thin dashed; border-right-color: currentcolor; border-right: thin dashed; border-style: dashed; border-top: thin dashed; border-width: thin;">celda (3,2)</td>
  <td style="border-bottom: thick solid; border-right: thick solid;">celda (3,3)</td>
</tr>
</tbody></table>

<br />

<p>Para ver más ejemplo de tablas se puede <a href="https://www.uv.es/jac/guia/tablaeje.htm" target="_blank"><b>visitar esta página</b></a> de la <a href="https://www.uv.es/jac/guia/indice.htm" target="_blank"><b>Guía para escribir documentos HTML</b></a>.</p>

<br />