How do I reduce the border spacing in table? - html

Question

I have a table with two rows, where there is one h1 heading in the left column. The two other columns is normal paragraphs with strong text.
The two right columns in first row goes alright, but on the second row there is too much vertical space between them. It is pretty obvious that it is the h1 which increases the vertical space between them. But how can I fix that, if possible at all? Do I really need to leave the h1 out of the table?
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
<table>
<tr>
<td><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td></td>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</table>

Answer 1

That spacing is most likely from the default margin on the h1 and p tags, reset them and see.
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
td {
border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
margin: 0; /*reset the margin*/
}
<table>
<tr>
<td><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td></td>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</tr>
</table>
Edit: I figured out (see comments below) what OP refers about the border spacing. It's both the empty <td>, and the border-collapse style. To combine those two <td>s, you can use rowspan. To get rid of the small space amount the lines, use border-collapse:collapse.
table {
width: 80%;
margin-left: 2%;
border-collapse: collapse; /*set it to collapse*/
}
td {
border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
margin: 0;
}
<table>
<tr>
<td rowspan="2"><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p></td>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</tr>
</table>

Answer 2

Try removing the margin from the h1 like so.
h1 {
margin: 0;
}

Answer 3

There are two things you can do. First, is making the h1 smaller in height, by reducing its margin and its parent padding.
Also, you can use the rowspan attribute in the td which contains your h1 instead of having a empty td on the second row.
The HTML:
<table>
<tr>
<td rowspan="2"><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</table>
And the CSS:
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
table tr td {
padding: 0;
}
table tr td h1 {
margin: 0;
}
table tr td p {
margin: 0;
}