Styling HTML tables with CSS - Web Design/UX Tutorial

[@dcode-software]

*To see a component-based version of a styled table, take a look at my recent video* 👇 kzbin.info/www/bejne/nZjXfWSordWrbsU

[@dictatorrich3412]

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]

That was my headache 😫

[@codewithegai]

No cap😂

[@shushuyu]

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]

No worries!

[@ihtishamriaz2598]

@@Ikram-Hussain in the table? it was "Quicksand" from google fonts

[@withinbracket7830]

one of the most underrated channel, love to see you grow, keep it up man

[@bennyhousemedia1405]

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

[@dcode-software]

If you enjoyed drop a Like and Subscribe for more web development projects and tutorials like this one! 🙂

[@lambo-ca]

There can't be a better video than on how to make a table . Thanks man Luv from Indonesia

[@Hunchomadereal]

No they can’t

[@DemsRNutless]

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]

I know how to do that

[@DemsRNutless]

@@Hunchomadereal If you could give me a hint in the right direction that would be great 👍

[@yoyoyoyo7813]

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

[@Hunchomadereal]

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

[@RobertWildling]

This would be worthy to have a follow-up tutorial, that covers aspects of responsive design when it comes to tables.

[@chellyhedgehog695]

Yea

[@janetreid7591]

Such a helpful tutorial, particularly for a very new coder. Following the tutorial has made my table look amazing, thank you.

[@dcode-software]

No worries mate I'm glad this helped you out 😁

[@iamzers9022]

@@dcode-software P.S. Would be better/efficient if styles is an external file. No hate xoxo

[@vipakatilishi]

I feel like a fast learner, learning from dcode...Thank you so much!

[@joaovictorvilar705]

Thanks so much! I had no idea how to do tables like this and looking so nice.

[@dcode-software]

Glad to hear!

[@malma28]

I want to create a web, but i'm just backend, and i'm search this, and found this video. Thank You Sir!

[@MantaRochenHL]

I love how you explain every little thing. Very useful and I can actually understand it afterwards.

[@PauloHeaven]

Thank you! That makes me realize we're able to do mindblowing things in a simple way without even knowing.

[@gestata897]

Excellent Presentation! Бог да те благослови.

[@dadstreets]

Не то слово

[@WormyLeWorm]

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]

Glad it was helpful! 🙂

[@akmedia8206]

I’ve been on KZbin long enough to know that Australian accent = dope video

[@godfreyravhutsi6628]

Very helpful. And the presentation was on point. I'm a beginner and this made so much sense. Thank you.

[@21thTek]

What a great job, keep doing it please , I really apreciate your effort !

[@patriayvida4209]

Thanks for sharing such a great information. Very well explained. I have subscribed to the channel. Please keep posting more videos! Thanks!

[@dcode-software]

Thank you 💪

[@patriayvida4209]

@@dcode-software You're welcome Sr. I love coding and your videos are very helpful. Thanks again and be safe!

[@kkbennie]

Thanks dcode, you just saved my day bro. Big up

[@dcode-software]

No problem! Mate I'm glad I saved it

[@avichi9175]

So basically, he truly loves saying basically. Thanks alot for a great tutorial !

[@senseitei]

Profound! I love how you explained every detail, sir:)!

[@bmfaysal33]

This video helped me very much. Thanks a lot.

[@shamiul_islam]

Awesome! Easy to understand and nicely explained.

[@HK-sw3vi]

i hate styling and your video got me through the pain of not having to look up table styles. thanks!

[@HEADSPACEnTIMING]

thank you very fast and to the point and I learned I was doing css wrong lol thank you again!

[@dcode-software]

No problem! What do you mean by you were doing it wrong?

[@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!

[@chelseakatsidzira7153]

my job asked me to do some front end work but i’m a back end dev lol thanks so much, i was struggling 😭😭

[@dcode-software]

No probs!

[@myronm5126]

lol same here.. all back-end I know front end but I hate the tedious work

[@chuksannoyxx-kt6ox]

@@myronm5126 True @Myron but i do both

[@lyricalsongs3901]

Hahaha I'm frontend developer but my job requirements are for backend ♥️

[@programming2347]

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

[@andrewliu2814]

You're a legend bro

[@husniddinsobirjonov532]

Great! I have one another idea, can you post your code as comment, I think it will easier to learn

[@LosingNemo]

Many thanks for the excellent tutorial, inspired me to have a go myself

[@dcode-software]

No worries mate! And yeah give it a crack

[@jonathanlopes1434]

thank you guy, you help me a lot

[@locdang4042]

Easy to understand and powerful. Thanks.

[@lucaaraneda-mayo4654]

My elements won't accept anything I put for it on the stylesheet any idea what is wrong?

[@ajithkx]

What font did you use?

[@karahitto]

So easy to follow, thank you so much

[@pysof]

this was great, thank you for sharing it!

[@kwokashley2000]

Simple and clear, thank you so much!!

[@roguishowl3915]

I’ve been watching css table vids all day and then I came across yours mate. Bloody brill job! Easy and to the point. 🫶🏻

[@philtyler4048]

Love this!!! Thanks for the excellent tutorial

[@jamesmassa1999]

Thank you Dom => this tutorial was relevant and useful. Code Bold : )

[@pete5370]

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!

[@TarunYadav-dp1id]

this was awsm. you saved my many days. css frustrate me

[@abdullahzaqebah7919]

what if we want to put the table inside a and the div has its own class CSS?

[@bookingsessential]

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 ?

[@Abdulhadi102-n9c]

Thank You, Brother! really helpful my tables are looking so freakin great now :) keep it up dude!

[@dcode-software]

You're welcome!

[@ctx4241]

what font are you using in VSC?

[@vishalambavade8539]

Which font did you use for the table's content?

[@s.n.a.k.e_e.k.a.n.s]

Quicksand

[@premkumarreyya9691]

Nice explanation loved it and thank you so much

[@keesbesterveld4730]

Nice tutorial, had some fun. One question though. Is it true that the box-shadow in combination with border-collapse not working in Edge and Ie 11? Also the border-radius seams not working aswell, although when specific target the right cell (class - thead - tr - th:last or first-child) it works fine. When using Chrome there seems no problem. Do you no any workaround for the shadows? I am using a seperate css file. Anyhow thx!

[@guilhermebraga8483]

Same problem in firefox

[@Rozhan_Fard]

thank you for the clear instructions.🙏🙏🙏

[@ВладимирМельников-р6щ]

Thx, very nice table! :)

[@duvanxo3033]

Nice video man! Gracias! subscribed !!

[@dcode-software]

Awesome, thanks!

[@o.fm.a5573]

what font family are you using? great video super understandable

[@scottsaccenti]

Really good. Made everything simple.

[@baselplays8]

Hey Thanx for the video I want to make users to able to edit the table ..

[@nathanstanfordsr]

I really liked this video.

[@ankamanirudh8837]

Excellent bro

[@prasadmadushan]

Thank you so much for your time and code

[@aliata9154]

awesome tutorial thank you

[@Tibaus1]

Good content! Thanks! What is your keyboard model?

[@mr.webdev3700]

Great video!

[@RottenbergZhenya]

many thanks the table is indeed good-looking

[@alexrepiscak7542]

very useful mate, thanks

[@luciapavlikova9942]

LMAO

[@fuechsleit9229]

this is gold!

[@pereznicollaine5380]

Very Satisfiying Bro Thankyou so much !

[@dcode-software]

My pleasure!

[@sagaragola5414]

what keyboard you are using? so satisfying key press sound.

[@bitpilot79]

This was a really helpful video, thank you. May i ask, if you could create a video on how to make this table editable, like in excel?

[@dcode-software]

Does the table need to save in a database or something like that?

[@bitpilot79]

@@dcode-software It would be also nice to have that feature, or maybe something like exporting the table as a CSV file.

[@dcode-software]

That's actually a really good idea! Thanks I'll put that down in my video ideas 😁

[@陈俊杰-v6l]

Can you show us how to build a scalable table? I mean, the table which contains long rows and you just want to show the client some of them if they do not click the table.

[@argedinopasoles]

great tutorial, really helpful for beginners like me, Thanks a lot

[@cognitivetech8323]

Hey Argedino, for such beginner content check this out for HTML forms kzbin.info/www/bejne/iqu7fWePj5ichbM

[@CodeWithLu]

good looking table. Thanks so much

[@joaquinleimeter2084]

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!!!

[@carolinadeungaro4436]

very very usefull, and congrats for the presentation

[@quiztherapy6851]

Thank you! How to add vertical lines to create columns?

[@albumjsk_archive5199]

Best training video it looks like you know my work, because my theme is green and white♥ thanks question: in 04:49 I did not understand the insertion of 2 times: .content-table th, .content-table td{} ?

[@anabellhr5955]

That was amazing, thank you!

[@gns4vm504]

Is there a way to enable where users can make changes in the field. Without going to the backend of the code.

[@alexiospapadopoulos9601]

Great tutorial. Subscribed.

[@aleksnikolov9097]

i followed it step for step, but the border radius doesn't work, any suggestion??

[@GoodGuy374]

what kind framework or plug in i can use for tables that export lines to excel sheet? regular looping line takes forever to export lines when there are more than few hundreds of lines. :(

[@softwarelivre2389]

Export as CSV, then do a string.trim().split(' ').map(row => row.trim().split(';').map(cell => cell.trim()));

[@aurelieneveu9595]

thanks a lot, great tuto !

[@dcode-software]

Glad it helped!

[@dRADSTARR]

Is it possible to connect this a CSS table to a database? I have a project where customers add their info on a form that lands in the database. I want to show the data with a stylized table on the site.

[@midonlyadyana2314]

How about if we using data with database sir? so could we put the if function to active row color by less or more of value the data column on database? Could you explain how to do it sir, please

[@gummex4192]

absolutely goated

[@otupchiienko]

thank you! nice work!)

[@dcode-software]

You're welcome!

[@chloesharp9546]

thanks dude, helped me :)

[@dcode-software]

Glad to hear it!

[@RuleSuccess.]

Bro thank you so much ❤

[@achoumoufreddyyvanamafon4587]

Thank you for this great tutorial and well designed table. I make it and add some background color change effect when hovering any row within the table body. But I notice a little shake on the row and finally on the table itself. The effect is correct but could be perfect without the shaking. Do you know why?

[@achoumoufreddyyvanamafon4587]

I've found the reason!

[@karlennis3448]

great content!!!!!

[@tradewinds9832]

It is topnotch. Thanks a lot man.

[@dcode-software]

No probs 🙂

[@elshaddaimhango5697]

why dont you explain those link link lines at the top. thats the part i wanna know first right?

[@rajbannasa7662]

Thank you so much sir 😊

[@fanaticbark4856]

Thank you it helps a lot 😊

[@AlexK-fe3et]

How can you make that table Scrollable and responsive ?

[@joaofsfranco]

Great job, thank you!