Styling Tables with CSS
The HTML table represents data in tabular form.CSS provides different table properties that improve the representation of tables.
Adding Border To The Table
To provide table border use CSS border
property.
The HTML table represents data in tabular form.CSS provides different table properties that improve the representation of tables.
To provide table border use CSS border
property.
CSS table property is used to beautify HTML table.Folowings are the CSS table properties like border
,
border-collapse
,width
& height
,etc.
Let us see its general syntax-
table,th,td {
border: 1px solid black;
}
table,th,td {
border: 1px solid black;
}
Note: In this example, the CSS border
property has been used to provide the border of the table.
The CSS border-collapse
property of the table has been used to collapse the table border.
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
Note: In this example, CSS border
& border-collapse
property has been used to make HTML table more elegant.
Table width and height can be set by CSS table width and height property.
table {
width: 100%;
}
th {
height: 40px;
}
table {
width: 100%;
}
th {
height: 40px;
}
Note: In this example, CSS width
& hight
property has been used to give HTML <table>
width and height.