Тёмный

Styling HTML tables with CSS - Web Design/UX Tutorial 

dcode
Подписаться 132 тыс.
Просмотров 486 тыс.
50% 1

View the Code & CodePen:
dcode.domenade.com/tutorials/...
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:
/ 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

Опубликовано:

 

22 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 257   
@dcode-software
@dcode-software 6 месяцев назад
*To see a component-based version of a styled table, take a look at my recent video* 👇 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ggtL1rxpx8c.html
@dictatorrich3412
@dictatorrich3412 2 года назад
Finally, a video about tables where there person is actually talking instead of playing music in the background. This video helped me immensely. Thank you so much!
@blaises8221
@blaises8221 2 года назад
That was my headache 😫
@appleid3223
@appleid3223 2 года назад
No cap😂
@dcode-software
@dcode-software 3 года назад
If you enjoyed drop a Like and Subscribe for more web development projects and tutorials like this one! 🙂
@MantaRochenHL
@MantaRochenHL 3 года назад
I love how you explain every little thing. Very useful and I can actually understand it afterwards.
@senseitei
@senseitei 4 года назад
Profound! I love how you explained every detail, sir:)!
@yoyoyoyo7813
@yoyoyoyo7813 3 года назад
you are the one, I have been looking around how to differentiate html and css, and everybody has been explaining this or that, you got the substance, thank you so so much, good good one
@withinbracket7830
@withinbracket7830 3 года назад
one of the most underrated channel, love to see you grow, keep it up man
@21thTek
@21thTek 4 года назад
What a great job, keep doing it please , I really apreciate your effort !
@Hunchomadereal
@Hunchomadereal 13 дней назад
Literally I barely follow up tutors but I had to even turn on my post notifications for this program I literally learnt this like I was been thought in class thanks and I appreciate sir
@shushuyu
@shushuyu 3 года назад
thank you so much for this. i was having a hard time finishing a project that pertains to using these tables. i didn't really understand the lecture but seeing you do things step by step and doing it along made it a lot easier for me.
@dcode-software
@dcode-software 3 года назад
No worries!
@Ikram-Hussain
@Ikram-Hussain Год назад
@@dcode-software hey bro! what font u used in vscode in this video
@ihtishamriaz2598
@ihtishamriaz2598 Год назад
@@Ikram-Hussain in the table? it was "Quicksand" from google fonts
@WormyLeWorm
@WormyLeWorm 3 года назад
Very helpful and direct, thank you. It's so hard to learn how this stuff actually works just reading about it without examples that are standardized, and then playing around from that standard.
@dcode-software
@dcode-software 3 года назад
Glad it was helpful! 🙂
@godfreyravhutsi6628
@godfreyravhutsi6628 4 года назад
Very helpful. And the presentation was on point. I'm a beginner and this made so much sense. Thank you.
@bennyhousemedia1405
@bennyhousemedia1405 9 месяцев назад
Finally a video on table without music but Explanation of what's happening n why this is that and that is this... This was helpful... Thumbs up
@gestata897
@gestata897 5 лет назад
Excellent Presentation! Бог да те благослови.
@user-dh5ms9dh5y
@user-dh5ms9dh5y 4 года назад
Не то слово
@janetreid7591
@janetreid7591 4 года назад
Such a helpful tutorial, particularly for a very new coder. Following the tutorial has made my table look amazing, thank you.
@dcode-software
@dcode-software 4 года назад
No worries mate I'm glad this helped you out 😁
@iamzers9022
@iamzers9022 4 года назад
@@dcode-software P.S. Would be better/efficient if styles is an external file. No hate xoxo
@shamiul_islam
@shamiul_islam 2 года назад
Awesome! Easy to understand and nicely explained.
@joaovictorvilar705
@joaovictorvilar705 3 года назад
Thanks so much! I had no idea how to do tables like this and looking so nice.
@dcode-software
@dcode-software 3 года назад
Glad to hear!
@lambo-ca
@lambo-ca 4 года назад
There can't be a better video than on how to make a table . Thanks man Luv from Indonesia
@Hunchomadereal
@Hunchomadereal 13 дней назад
No they can’t
@PauloHeaven
@PauloHeaven Год назад
Thank you! That makes me realize we're able to do mindblowing things in a simple way without even knowing.
@kwokashley2000
@kwokashley2000 2 года назад
Simple and clear, thank you so much!!
@philtyler4048
@philtyler4048 2 года назад
Love this!!! Thanks for the excellent tutorial
@RobertWildling
@RobertWildling 4 года назад
This would be worthy to have a follow-up tutorial, that covers aspects of responsive design when it comes to tables.
@chellyhedgehog695
@chellyhedgehog695 4 года назад
Yea
@kkbennie
@kkbennie 4 года назад
Thanks dcode, you just saved my day bro. Big up
@dcode-software
@dcode-software 4 года назад
No problem! Mate I'm glad I saved it
@locdang4042
@locdang4042 3 года назад
Easy to understand and powerful. Thanks.
@pysof
@pysof 4 месяца назад
this was great, thank you for sharing it!
@malma28
@malma28 3 года назад
I want to create a web, but i'm just backend, and i'm search this, and found this video. Thank You Sir!
@karahitto
@karahitto Год назад
So easy to follow, thank you so much
@LosingNemo
@LosingNemo 4 года назад
Many thanks for the excellent tutorial, inspired me to have a go myself
@dcode-software
@dcode-software 4 года назад
No worries mate! And yeah give it a crack
@scottsaccenti
@scottsaccenti 3 года назад
Really good. Made everything simple.
@anabellhr5955
@anabellhr5955 2 года назад
That was amazing, thank you!
@Twitty1482
@Twitty1482 3 года назад
Thank You, Brother! really helpful my tables are looking so freakin great now :) keep it up dude!
@dcode-software
@dcode-software 3 года назад
You're welcome!
@HEADSPACEnTIMING
@HEADSPACEnTIMING 4 года назад
thank you very fast and to the point and I learned I was doing css wrong lol thank you again!
@dcode-software
@dcode-software 4 года назад
No problem! What do you mean by you were doing it wrong?
@mr.webdev3700
@mr.webdev3700 5 лет назад
Great video!
@prasadmadushan
@prasadmadushan 4 года назад
Thank you so much for your time and code
@alexiospapadopoulos9601
@alexiospapadopoulos9601 4 года назад
Great tutorial. Subscribed.
@jamesmassa1999
@jamesmassa1999 2 года назад
Thank you Dom => this tutorial was relevant and useful. Code Bold : )
@jonathanlopes1434
@jonathanlopes1434 10 месяцев назад
thank you guy, you help me a lot
@premkumarreyya9691
@premkumarreyya9691 2 года назад
Nice explanation loved it and thank you so much
@mightydrew1970
@mightydrew1970 Год назад
Great explanation and exactly what I wanted to see - I'm generating some html emails for an automated security audit of Teams and wanted my el-blando tables to look fantastic - this tutorial hit the spot and my emails will go out looking awesome!
@joaofsfranco
@joaofsfranco 2 года назад
Great job, thank you!
@patriayvida4209
@patriayvida4209 3 года назад
Thanks for sharing such a great information. Very well explained. I have subscribed to the channel. Please keep posting more videos! Thanks!
@dcode-software
@dcode-software 3 года назад
Thank you 💪
@patriayvida4209
@patriayvida4209 3 года назад
@@dcode-software You're welcome Sr. I love coding and your videos are very helpful. Thanks again and be safe!
@meow_meow2023
@meow_meow2023 Год назад
thank you for the clear instructions.🙏🙏🙏
@fanaticbark4856
@fanaticbark4856 3 года назад
Thank you it helps a lot 😊
@HK-sw3vi
@HK-sw3vi 3 года назад
i hate styling and your video got me through the pain of not having to look up table styles. thanks!
@reginemargareta4460
@reginemargareta4460 4 года назад
life saver! thank you
@akmedia8206
@akmedia8206 2 года назад
I’ve been on RU-vid long enough to know that Australian accent = dope video
@CodeWithLu
@CodeWithLu 2 года назад
good looking table. Thanks so much
@danutzz8
@danutzz8 4 года назад
top man good video--cheers!
@avichi9175
@avichi9175 2 года назад
So basically, he truly loves saying basically. Thanks alot for a great tutorial !
@user-hl5be3vg8o
@user-hl5be3vg8o 2 года назад
Thx, very nice table! :)
@carolinadeungaro4436
@carolinadeungaro4436 3 года назад
very very usefull, and congrats for the presentation
@aliata9154
@aliata9154 2 года назад
awesome tutorial thank you
@fahadfaez3559
@fahadfaez3559 4 года назад
thank you , great video
@argedinopasoles
@argedinopasoles 3 года назад
great tutorial, really helpful for beginners like me, Thanks a lot
@cognitivetech8323
@cognitivetech8323 3 года назад
Hey Argedino, for such beginner content check this out for HTML forms ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TzXL4YZ3iOQ.html
@RuleSuccess.
@RuleSuccess. 2 года назад
Bro thank you so much ❤
@pavelech2565
@pavelech2565 3 года назад
Very useful, thanks
@andrewliu2814
@andrewliu2814 2 года назад
You're a legend bro
@kaoup3299
@kaoup3299 3 года назад
Thank you for this sir 🙏
@nathanstanfordsr
@nathanstanfordsr 10 месяцев назад
I really liked this video.
@ankamanirudh8837
@ankamanirudh8837 2 года назад
Excellent bro
@pereznicollaine5380
@pereznicollaine5380 3 года назад
Very Satisfiying Bro Thankyou so much !
@dcode-software
@dcode-software 3 года назад
My pleasure!
@duvanxo3033
@duvanxo3033 3 года назад
Nice video man! Gracias! subscribed !!
@dcode-software
@dcode-software 3 года назад
Awesome, thanks!
@truthvfiction
@truthvfiction 3 месяца назад
A very appealing table! It would be great to see a hover over row to highlight the entire row with a font color change as well. Who knows, maybe a few other effects as well…
@Hunchomadereal
@Hunchomadereal 13 дней назад
I know how to do that
@truthvfiction
@truthvfiction 13 дней назад
@@Hunchomadereal If you could give me a hint in the right direction that would be great 👍
@karlennis3448
@karlennis3448 2 года назад
great content!!!!!
@gabrielnhambirri
@gabrielnhambirri 2 месяца назад
Thanks bro!
@the_kickers_of_the_coconut6375
@the_kickers_of_the_coconut6375 3 года назад
awesome thanks for the tutorial!
@dcode-software
@dcode-software 3 года назад
Glad it was helpful!
@rajbannasa7662
@rajbannasa7662 2 года назад
Thank you so much sir 😊
@aurelieneveu9595
@aurelieneveu9595 Год назад
thanks a lot, great tuto !
@dcode-software
@dcode-software Год назад
Glad it helped!
@slimanemzerguat3298
@slimanemzerguat3298 4 года назад
thanks bro that was so clean and attractive
@alexrepiscak7542
@alexrepiscak7542 2 года назад
very useful mate, thanks
@luciapavlikova9942
@luciapavlikova9942 2 года назад
LMAO
@otupchiienko
@otupchiienko 2 года назад
thank you! nice work!)
@dcode-software
@dcode-software 2 года назад
You're welcome!
@RottenbergZhenya
@RottenbergZhenya 2 года назад
many thanks the table is indeed good-looking
@imchundangful
@imchundangful 3 года назад
very stylish table!
@jerichodelacruz6070
@jerichodelacruz6070 5 месяцев назад
thank you so cool!
@priyanshramnani1751
@priyanshramnani1751 3 года назад
Thank you! :)
@fuechsleit9229
@fuechsleit9229 2 года назад
this is gold!
@hot_milk4001
@hot_milk4001 3 года назад
beautiful work from a beautiful man
@chloesharp9546
@chloesharp9546 3 года назад
thanks dude, helped me :)
@dcode-software
@dcode-software 3 года назад
Glad to hear it!
@misterpoof3197
@misterpoof3197 4 года назад
Thanks you !
@danilomassoni5294
@danilomassoni5294 2 года назад
Amazing!
@samartharora638
@samartharora638 3 года назад
Thank you brother
@bookingsessential
@bookingsessential 2 года назад
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 ?
@pal_source
@pal_source 10 месяцев назад
Thanks!
@pete5370
@pete5370 4 года назад
Very clean and uncluttered - doesn’t detract from the actual data. I am currently fighting with large tables which extend well beyond the right and bottom browser boundaries and can’t get the scroll bars to show correctly - I get two vertical scroll bars and the horizontal sb only appears when scrolling right down to the last table row. Could you stretch to making a video on scrolling larger data tables? Huge thank you for all your tutorials!
@yaelnjo1173
@yaelnjo1173 4 года назад
Excelente vídeo
@kasvith
@kasvith 3 года назад
thanks man
@automationbypankajpal7793
@automationbypankajpal7793 3 года назад
Good explain
@Tibaus1
@Tibaus1 Год назад
Good content! Thanks! What is your keyboard model?
@bikramchettri9405
@bikramchettri9405 5 лет назад
Good one mate
@dcode-software
@dcode-software 5 лет назад
Yeah mate no worries 😁
@giovanegarcezdarosa5390
@giovanegarcezdarosa5390 4 года назад
thanks!
@user-vk5mc4wc1i
@user-vk5mc4wc1i Год назад
well done
@osamahassan462
@osamahassan462 3 года назад
thanks alot friend
@lexurrea8977
@lexurrea8977 Год назад
Thanks a lot
@chaimfar2
@chaimfar2 4 года назад
great video!!! thank you !! may i ask how can you add borders to the sisdes as you did in the bottom?
@adnanabdullah5068
@adnanabdullah5068 4 года назад
you can add borders in sides by css property named border-left or border-right.
@zockmitmuech3178
@zockmitmuech3178 3 года назад
Hello Mate great channel! I really enjoy watching your videos. Do you know a simple solution to show the rank according to its position on the table? Cheers Michael
@medAmineRg
@medAmineRg 3 года назад
thanks dom
@arjunmuktawatvlogs6519
@arjunmuktawatvlogs6519 2 года назад
Thank you Sir
@o.fm.a5573
@o.fm.a5573 6 месяцев назад
what font family are you using? great video super understandable
@joaquinleimeter2084
@joaquinleimeter2084 2 года назад
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!!!
@programming2347
@programming2347 3 года назад
Hello your explanation was great, but when i try to apply "border-radius", even using overflow:hidden; my table only applies the "border-radius" to the shadow, not to the header corners, what do you think might be the problem? im using eclipse