HTML create table - html

Question

Im having trouble with getting table to look like I need.
I need table like this
But what i keep gettng is that ether the text of sundmused ja hadaabi are overlapping or thevahetused cell gets too wide so the alignment of thext gets weird. Can someone help me to create a table like this.

Answer 1

If you have too small table, you can use text-overflow: ellipsis; to add ... when there is not enough space for text.
table {
border: 1px solid black;
table-layout: fixed;
width: 30%;
border-collapse: collapse;
text-align: center;
margin-bottom: 10px;
}
table:nth-child(2) {
width: 100%;
}
table:nth-child(3) {
width: 50%;
}
table td {
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.important {
background-color: yellow;
}
<table>
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>

Answer 2

This looks suspiciously like an assignment! But anyway:
I suspect your problem is that the first two cells 'span' three columns in the bottom row, and they don't do this automatically. Adding colspan="3" to the cells gives the result as below, which is guess is what you need.
td {
text-align: center;
}
<table border="1">
<tr>
<td colspan="3">vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td colspan="3">01.01.2017.00:00 - 02.01.2017 00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
</tr>
</table>

Answer 3

Add your style to this code (padding, margin and color)
<table border style='text-align: center;border-collapse: collapse'>
<tr>
<td COLSPAN=3>vahetused</td>
<td>sundmused</td>
<td>hadaabid</td>
</tr>
<tr>
<td COLSPAN=3>01.01.2017.00:00 - 02.01.2017.00:00</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Kokku</td>
<td>1</td>
<td> </td>
<td>1</td>
<td>1</td>
</tr>
</table>