2020(e)ko azaroaren 24(a), asteartea

9 | Una tabla más compleja [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 la anchura de una columna, así como el centrado del contenido de una celda. Observar en la tercera fila cómo se puede unificar en una única celda el contenido de las tres celdas de esa fila. Observar en la cuarta fila cómo se puede unificar en una única celda el contenido de las dos celdas.</div>

</td></tr>

</tbody></table>

<br />

<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;">

<tbody>

<tr>

<td style="text-align: center;" width="20%">celda (1,1)</td>

<td style="text-align: center;" width="50%">celda (1,2)</td>

<td style="text-align: center;" width="30%">celda (1,3)</td>

</tr>

<tr>

<td style="text-align: center;" width="20%">celda (2,1)</td>

<td style="text-align: center;" width="50%"><div style="text-align: left;">

<b>celda (2,2)</b></div>

</td>

<td style="text-align: center;" width="30%">celda (2,3)</td>

</tr>

<tr>

<td colspan="3" rowspan="1" style="text-align: center;"><b> <span style="color: white;">COLAPSAR 3 COLUMNAS</span></b></td>

</tr>

<tr>

<td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td>

<td><div style="text-align: center;">

celda final</div>

</td>

</tr>

<tr>

<td><div style="text-align: center;">

celda inical</div>

</td>

<td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td>

</tr>

</tbody>

</table>


<br />


<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody>

<tr>

<td colspan="1" rowspan="3" style="text-align: center;" width="25%"><b><span style="color: blue;">

celda (1,1)<br />

celda (2,1)<br />

celda (3,1)</span></b> </td>

<td style="text-align: center;" width="25%">celda (1,2)</td>

<td style="text-align: center;" width="25%">celda (1,3)</td>

<td style="text-align: center;" width="25%">celda (1,4)</td>

</tr>

<tr>

<td style="text-align: center;" width="25%">celda (2,2)</td>

<td style="text-align: center;" width="25%">celda (2,3)</td>

<td style="text-align: center;" width="25%">celda (2,4)</td>

</tr>

<tr>

<td style="text-align: center;" width="25%">celda (3,2)</td>

<td style="text-align: center;" width="25%">celda (3,3)</td>

<td style="text-align: center;" width="25%">celda (3,4)</td>

</tr>

</tbody></table>


<br />


<table border="1" style="background-color: #eeeeee;">

<tbody>

  <tr style="background-color: #aaaaaa;">

    <td style="width: 100px;">

      <div style="margin-left: 20px;"><strong>Dirección</strong></div>

    </td>

    <td style="width: 200px;">

      <div style="margin-left: 20px;"><strong>Temática</strong></div>

    </td>

    <td style="width: 300px;">

      <div style="margin-left: 20px;"><strong>Apartados</strong></div>

    </td>

  </tr>

<tr>

  <td>

    <div style="margin-left: 20px;">

      <p><a href="https://blogbasicoparapracticarhtml.blogspot.com/" target="_blank">Blog básico para practicar HTML</a></p></div>

  </td>

  <td>

    <div style="margin-left: 20px;">Introducción práctica al lenguaje de marcas HTML</div>

  </td>

  <td>

    <div style="margin-left: 20px;">

    <ul>

      <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2019/10/pagina-html.html" target="_blank">0. página HTML</a></li>

      <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/primeras-etiquetas.html" target="_blank">1. primeras etiquetas</a></li>

      <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/mas-etiquetas.html" target="_blank">2. más etiquetas</a></li>

      <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" target="_blank">3. símbolos especiales</a></li>

      <li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/enumeracion-de-listas.html" target="_blank">4. enumeración de listas</a></li>

      <li>...</li>

    </ul>

    </div>

</td>

</tr>

</tbody>

</table>


<br /> 

iruzkinik ez:

Argitaratu iruzkina