<div>

<h1>Tables</h1>

<p>As in the browser, the table borders are separated by default.</p>

<div style="display: flex; align-items: flex-start">

<table>

<tr>

<th style="text-align: center;">^{td align center}</th>

<th style="text-align: right">^colspan</th>

</tr>

<tr>

<td style="text-align: right" colspan="2">is supported</td>

</tr>

</table>

<figure>

<table style="border: 1px dashed black; border-spacing: 10px">

<tr>

<th style="text-align: center; background: darkslategray; color: white">th background</th>

</tr>

<tr>

<td style="text-align: right; border: 3px solid green">td border</td>

</tr>

</table>

<figcaption>border-spacing: 10px</figcaption>

</figure>

<table style="padding: 20px; border: 1px solid red; background: #7f7f7f">

<tr>

<th>table padding</th>

</tr>

<tr>

<td>table background</td>

</tr>

</table>

</div>

<h2>border-collapse: collapse</h2>

<table style="border: 3px solid black; padding-left: 30px; width: 80%; border-collapse: collapse">

<tr style="height: 50px;">

<th style="text-align: left;">text-align: left</th>

<th style="text-align: left;">Th2</th>

<th style="text-align: left;">Th3</th>

</tr>

<tr>

<td style="background: red;padding-top: 20px;">Red Background</td>

<td colspan="2" style="padding: 0">colspan="2"</td>

</tr>

<tr>

<td style="border: 4px solid #00dc3c;padding-bottom: 20px; padding-left: 20px;">Td1</td>

<td rowspan="3" style="border: 1px solid black">rowspan=3</td>

<td style="">Td3</td>

</tr>

<tr>

<td style="padding-right: 20px;">Td1</td>

<td>Td3</td>

</tr>

<tr>

<td style="border: 1px solid #00dc3c;padding-right: 20px;">Td1</td>

<td>Td3</td>

</tr>

</table>

</div>