HTML table with aligned paragraphs in different cells - html

Question

I'm trying to reproduce the following table in HTML (retrieved from a PDF):
Notice how the paragraphs on the same cell are aligned with paragraphs in other cells.
Below I show to you the table in a snippet:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:50%">
<tr>
<td rowspan="2">
<p>Procedimentos</p>
</td>
<td colspan="2">
<p>Taxas (euros)</p>
</td>
</tr>
<tr>
<td>
<p>Obtenção</p>
</td>
<td>
<p>Renovação</p>
</td>
</tr>
<tr>
<td>
<p>1 —</p>
<p>2 —</p>
<p>3 —</p>
<p>4 — Produtor de semente de variedades de conservação</p>
<p>5 — Acondicionador de semente de variedades de conservação</p>
</td>
<td>
<p>...</p>
<p>...</p>
<p>...</p>
<p>200</p>
<p>150</p>
</td>
<td>
<p>...</p>
<p>...</p>
<p>...</p>
<p>30</p>
<p>15</p>
</td>
</tr>
</table>
If the paragraphs fit completely the cell without line break (remove "width" in <table>), everything is ok. However, when the table shrinks (as shown in the snippet), there is a line break and the paragraphs are no longer aligned (naturally).
I see two approaches here:
via CSS, which I don't know how.
via HTML, by subdividing the whole table such that each paragraph alignment becomes a new table row.
Option 2. is quite painful to program since I'm building these tables programatically (from PDF), which means an algorithm to subdivide the table.
Does anyone knows how to force the constraint that the paragraphs should stay aligned? Is that possible in CSS (with cross browser support)?

Answer 1

You need to make a <tr> for each row containing 3 <td> for each column so they stay aligned, <p> are not needed.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
vertical-align: middle;
}
td {border-top: none; border-bottom: none;}
th, td {padding: 12px 16px;}
<table style="width:50%">
<tr>
<th rowspan="2"> <!-- use th for border -->
Procedimentos
</th>
<th colspan="2">
Taxas (euros)
</th>
</tr>
<tr>
<th>
Obtenção
</th>
<th>
Renovação
</th>
</tr>
<tr>
<td> <!-- use td for no border -->
1 —
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
<tr>
<td>
2 —
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
<tr>
<td>
3 —
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
<tr>
<td>
4 — Produtor de semente de variedades de conservação
</td>
<td>
200
</td>
<td>
30
</td>
</tr>
<tr>
<td>
5 — Acondicionador de semente de variedades de conservação
</td>
<td>
150
</td>
<td>
15
</td>
</tr>
</table>

Answer 2

As #Heah writes, you need to put the data in separate rows. This is also better for accessibility, since it corresponds to the logical structure of the data and lets items be accessed as table cells, not as paragraphs inside a cell.
In addition, to reproduce the layout of the PDF file, you need to set borders in a more detailed manner in each direction and to reduce font size in header cells. The following does this relatively accurately, except that it does not produce the rows of dots (which are a separate issue, often asked at SO—no simple answer, but several possible approaches).
<style>
table {
width: 26em;
border: solid;
border-width: 3px 0;
border-collapse: collapse;
}
th, td {
vertical-align: bottom;
text-align: center;
border: solid 2px gray;
}
td {
border-top: none;
border-bottom: none;
}
td:first-child {
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
th {
padding: 0.3em 0.4em;
font-weight: normal;
vertical-align: middle;
font-size: 80%;
}
th:first-child, td:first-child {
border-left: none;
}
th:last-child, td:last-child {
border-right: none;
}
</style>
<table>
<thead>
<tr><th rowspan="2">Procedimentos
<th colspan="2">Taxas (euros)
<tr><th>Obtenção
<th>Renovação
</thead>
<tbody>
<tr>
<td>1 —
<td>…
<td>…
<tr>
<td>2 —
<td>…
<td>…
<tr>
<td>3 —
<td>…
<td>…
<tr>
<td>4 — Produtor de semente de variedades de conservação
<td>200
<td>30
<tr>
<td>5 — Acondicionador de semente de varie­dades de conservação
<td>150
<td>15
</tbody>
</table>