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:
You can copy full HTML and CSS code for this table below:
In short that is it.
And if you want to learn HTML, CSS and JS much faster download this FREE PDF Guide.
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:
And here is the full code that shows you how to do it:
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,