Everything about css table styling

CSS table properties

We use table properties to design a table.
The properties are:
border-spacing:value in pixel, percent, etc.
If we pass two values, it means first value is for horizontal(y axis) gap and second is vertical(x axis gap). If we pass one value then it is for both axis.
This property is used to control space between two borders.

border-collapse:two fixed value separate(default) and collapse
This is used for removing space between borders.

text-align:fixed value left, right, center;
Used set position or alignment of text or content present in a cell. If we use right then the content of cell will align on the right side of the cell, for using center the content will align on center of the cell.

vertical-align:fixed value top, bottom, middle(default);
Used set position or alignment of text or content in a cell. If we use top then the content of cell will align on the top of the cell, for using bottom the content will align on the bottom of the cell.

caption-side:fixed value top(default) or bottom;
Used to set position of table caption.

empty-cells:Two fixed values show(default) or hide;
To show or hide an empty cell we use this property.

table-layout:Two fixed values auto or fixed;
Auto means if new data comes, then the table will adjust the data in it and fixed means not.

Padding:value in pixel or percent;
Used to give padding.

width:value in pixel,percent etc;
Used to set width of the whole table

height:value in pixel,percent etc;
Used to set height of the whole table

border:value in pixel,percent etc;
Used to set border of the whole table

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    table{
        border: 2px solid black;
        height:200px;
        width:250px;
        border-collapse:collapse;
    }
    td{
        text-align: center;
    }
    table, th, td {
        border: 1px solid;
    }
</style>
</head>
<body>

<table>
<th>Column1</th>
<th>Column2</th>

<tr><td>1</td><td>2</td></tr>
<tr><td>6</td><td>5</td></tr>

</table>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us