HTML table indent

CyberBotMachines

https://img.particlenews.com/image.php?url=1eXgxb_0bh6Fkd700
CyberBotMachineswww.CyberBotMachines.com

TL;DR Summary

If you want to do an entire HTML table indent then all you have to do is margin-left on a table element and that's it. (how to indent specific rows is covered in the next section)

The end result is a table with 50px indentation that looks like this:

https://img.particlenews.com/image.php?url=0KolUg_0bh6Fkd700
html table indentwww.CyberBotMachines.com

You can copy full HTML and CSS code for this table below:

<style>
body { background-color: lightblue; }
th, td {
text-align: center;
line-height: 40px;
border: 1px solid;
width: 200px;
}
table {
border-spacing: 1px;
margin-left: 50px;
}
</style>

<table>
<thead> <!-- HEADER ROW -->
<th>Name</th> <th>Age</th>
</thead>

<tbody>
<tr> <!-- FIRST ROW -->
<td>John</td> <td>27</td>
</tr>
<tr> <!-- SECOND ROW -->
<td>Jane</td> <td>25</td>
</tr>
</tbody>
</table>

In short that is it.

And if you want to learn HTML, CSS and JS much faster download this FREE PDF Guide.

More Details

Indenting specific rows in a table is much more difficult and realistically cannot be done with table element. This is why I (almost) always recommend using div elements to create a table.

Though I understand sometimes you cannot choose the HTML you get and you have to modify somehow the HTML you're presented with. (using only CSS)

Luckily for you there is one trick that allows you to indent a table row in increments of one column width.

The key is to use empty-cells: hide; CSS property and add an empty td element in front of the row. This might be a little bit "dirty" but it may just accomplish what you want.

Here is how it looks like:

https://img.particlenews.com/image.php?url=1lN5VR_0bh6Fkd700
html table indent rowwww.CyberBotMachines.com

And here is the full code that shows you how to do it:

<style> 
body { background-color: lightblue; }
th, td {
text-align: center;
line-height: 40px;
border: 1px solid;
width: 200px;
}
table {
border-spacing: 1px;
margin-left: 50px;
empty-cells: hide;
}
</style>

<table>
<thead> <!-- HEADER ROW -->
<th>Name</th> <th>Age</th>
</thead>

<tbody>
<tr> <!-- FIRST ROW -->
<td></td> <td>John</td> <td>27</td>
</tr>
<tr> <!-- SECOND ROW -->
<td>Jane</td> <td>25</td>
</tr>
</tbody>
</table>

So this is all there is to making HTML table indent.

And again, if you want to learn HTML, CSS and JS much faster download this FREE PDF Guide

Until next time,
Will

Comments / 0

Published by

Teaching you how to speed up your programming career!

New York, NY
2 followers

Comments / 0