Table style in css
In this article we are going to learn about table style, text-transform, letter-spacing, text-align property and more in css, how to style tables.
We learnt about css in general, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css, box shadow in css and text align in css so, we will be focusing on table style.
Table style
Table styling is a way of giving tables some good features to look nice for better reading of data in html using just css properties.
Let us create a simple table with some of styles applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
table {
border: 2px solid red;
}
th {
text-transform: uppercase;
text-align: center;
background: red;
color: white;
}
tr {
text-align: center;
background: orange;
color: white;
}
<style/>
</head>
<body>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr>
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr>
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
</body>
</html>
So, we should have the following results.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |
Let us create another simple table with some of styles applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
th {
text-transform: uppercase;
text-align: center;
background: red;
color: white;
}
.tr1 {
text-align: center;
background: green;
color: white;
}
.tr2 {
text-align: center;
background: blue;
color: white;
}
.tr3 {
text-align: center;
background: green;
color: white;
}
<style/>
</head>
<body>
<table width="100%">
<tr class="tr1">
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr class="tr2">
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr class="tr3">
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
</body>
</html>
So, we should have the following results.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |
Let us create another simple table with some of styles applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.tr1 {
text-align: center;
background: pink;
color: black;
}
.td1, td3 {
text-align: center;
background: purple;
color: white;
}
.td2, td4 {
text-align: center;
background: navy;
color: white;
}
<style/>
</head>
<body>
<table width="100%">
<tr class="tr1">
<th>First name</th>
<th>Last name</th>
<th>District</th>
<th>Age</th>
</tr>
<tr>
<td class="td1">Tanki</td>
<td class="td2">Matete</td>
<td class="td3">Berea</td>
<td class="td4">26</td>
</tr>
<tr>
<td class="td1">Tumisang</td>
<td class="td2">Katile</td>
<td class="td3">Berea</td>
<td class="td4">11</td>
</tr>
</table>
</body>
</html>
So, we should have the following results.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |
Let us create another simple table with some of styles applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.th1, th3 {
text-transform: uppercase;
background: yellow;
}
.th2, th4 {
text-transform: uppercase;
background: skyblue;
}
.tr1, tr3 {
text-align: center;
border: 1px solid blue;
}
.tr2 {
text-align: center;
border: 1px solid green;
}
<style/>
</head>
<body>
<table width="100%">
<tr class="tr1">
<th class="th1">First name</th>
<th class="th2">Last name</th>
<th class="th3">District</th>
<th class="th4">Age</th>
</tr>
<tr class="tr2">
<td>Tanki</td>
<td>Matete</td>
<td>Berea</td>
<td>26</td>
</tr>
<tr class="tr3">
<td>Tumisang</td>
<td>Katile</td>
<td>Berea</td>
<td>11</td>
</tr>
</table>
</body>
</html>
So, we should have the following results.
| First name | Last name | District | Age |
|---|---|---|---|
| Tanki | Matete | Berea | 26 |
| Tumisang | Katile | Berea | 11 |