View the code on CodePen:
https://codepen.io/dcode-software/pen/dLVwOY
In this video we’re going to take a look at how to style HTML tables using CSS – this is an example of how I like to style up tables, you can easily take this code and then tweak it to suit your needs or own style.
Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!
0:00 Overview
0:45 Starting on the HTML
1:40 Styling the table element
3:22 Styling the table header row
4:47 Styling the table cells
5:27 Styling the table rows
7:16 Adding a few extras
9:30 Wrapping up
Follow me on Twitter @dcode!
If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!
#dcode #css #webdev
source
If you enjoyed drop a Like and Subscribe for more web development projects and tutorials like this one! 🙂
Parabéns linda tabela
Simple and clear, thank you so much!!
thank you! nice work!)
great content!!!!!
awesome tutorial thank you
Amazing!
Thank you Sir
Thx, very nice table! 🙂
I’ve been on YouTube long enough to know that Australian accent = dope video
What's your font?
Where can I find your "assets/dcode.css" stylesheet?
mantap
Your URL ? how?
Great tutorial on styling HTML tables. Thanks, Dom
{2022-01-03}
many thanks
the table is indeed good-looking
this is gold!
5:23
I was stuck for like 10-min because the shorthand method was not working for me. Don't use the shorthand method and use the following instead
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
adding-left: 12px;
Excellent bro
Great job, thank you!
Great video!! I wanted to know if its the same if you wrote in the end
.active-row intead of targeting everything in between. Thanks!!!
Can i ask what packages do you download at atom???
good looking table. Thanks so much
Bro thank you so much ❤
tldr code dump:
<style>
.content-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 12px 15px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.content-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}
</style>
<body>
<table class="content-table">
<thead>
<th>Rank</th>
<th>Name</th>
<th>Points</th>
<th>Team</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Domenic</td>
<td>88,110</td>
<td>dcode</td>
</tr>
<tr class="active-row">
<td>2</td>
<td>Sally</td>
<td>72,400</td>
<td>Students</td>
</tr>
<tr>
<td>3</td>
<td>Nick</td>
<td>52,300</td>
<td>dcode</td>
</tr>
</tbody>
</table>
</body>
Nice explanation loved it and thank you so much
thanks you
Lovely… clean… logical reasoning… perfect. As always, great work.
No doubt you've demo'd "responsive" and/or "sliding" columns before? or should I search harder ?
How can you make that table Scrollable and responsive ?
That was amazing, thank you!
please what is the font family that he used in this video