How to make compressed html tables [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would like to create for example below html tables, It bsically come from square tables.
I tried sometimes, but I couldn't figure out how to change height of each cells.
If someone has opinion, please let me know.
Thanks
table {
border-collapse:collapse;}
td {
padding:5px;
border:solid black 1px;}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Answer 1

Maybe with the :empty CSS pseudo-class?
Removing the padding of empty table cells:
table {
border-collapse:collapse;
}
td {
padding:5px;
border:solid black 1px;
}
td:empty {
padding: 0;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Not displaying empty table cells.
table {
border-collapse:collapse;
}
td {
padding:5px;
border:solid black 1px;
}
td:empty {
display: none !important;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Answer 2

If I'm reading you right my solution is to add specific classes to the cells that you'd like to be different, that way you can specify the different in padding of the cells with numbers.
table {
border-collapse:collapse;}
td {
padding:25px;
border:solid black 1px;}
.tall {
padding-right:100px;
padding-bottom:100px;
}
<table>
<tr>
<td class="tall">1</td>
<td class="tall">2</td>
<td class="tall">3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="tall">4</td>
<td class="tall">5</td>
<td class="tall">6</td>
</tr>
</table>
Check out my codepen here:
https://codepen.io/danhebdon/pen/RwPzzvm

Answer 3

Here is a duplicate version of the original table:
table {
width: 100%;
border: 3px solid gray;
border-collapse:collapse;
font-family: 'Arial', sans-serif;
font-size: 36px;
}
td {
border: 3px solid gray;
height: 200px;
text-align: top;
padding: 12px;
}
.smallheight {
height: 50px;
}
<table>
<tr>
<td valign="top">1</td>
<td valign="top">2</td>
<td valign="top">3</td>
</tr>
<tr>
<td class="smallheight"></td>
<td class="smallheight"></td>
<td class="smallheight"></td>
</tr>
<tr>
<td class="smallheight"></td>
<td class="smallheight"></td>
<td class="smallheight"></td>
</tr>
<tr>
<td class="smallheight"></td>
<td class="smallheight"></td>
<td class="smallheight"></td>
</tr>
<tr>
<td valign="top">4</td>
<td valign="top">5</td>
<td valign="top">6</td>
</tr>
</table>
CodePen: https://codepen.io/marchmello/pen/KKpjjvz