Styling HTML tables with CSS - Web Design/UX Tutorial

Sdílet
Vložit
  • čas přidán 27. 08. 2024

Komentáře • 258

  • @dcode-software
    @dcode-software  Před 8 měsíci

    *To see a component-based version of a styled table, take a look at my recent video* 👇
    czcams.com/video/ggtL1rxpx8c/video.html

  • @dictatorrich3412
    @dictatorrich3412 Před 2 lety +45

    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!

  • @dcode-software
    @dcode-software  Před 3 lety +41

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

  • @vipakatilishi
    @vipakatilishi Před 18 dny

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

  • @bennyhousemedia1405
    @bennyhousemedia1405 Před 11 měsíci +1

    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

  • @shushuyu
    @shushuyu Před 4 lety +28

    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  Před 4 lety +1

      No worries!

    • @Ikram-Hussain
      @Ikram-Hussain Před rokem

      @@dcode-software hey bro!
      what font u used in vscode in this video

    • @ihtishamriaz2598
      @ihtishamriaz2598 Před rokem +1

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

  • @Hunchomadereal
    @Hunchomadereal Před 2 měsíci

    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

  • @withinbracket7830
    @withinbracket7830 Před 3 lety +6

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

  • @lambo-ca
    @lambo-ca Před 4 lety +2

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

  • @yoyoyoyo7813
    @yoyoyoyo7813 Před 3 lety +1

    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

  • @RobertWildling
    @RobertWildling Před 4 lety +5

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

  • @malma28
    @malma28 Před 4 lety +2

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

  • @janetreid7591
    @janetreid7591 Před 5 lety +6

    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  Před 5 lety +1

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

    • @iamzers9022
      @iamzers9022 Před 5 lety

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

  • @PauloHeaven
    @PauloHeaven Před rokem

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

  • @akmedia8206
    @akmedia8206 Před 2 lety +2

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

  • @MantaRochenHL
    @MantaRochenHL Před 3 lety +2

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

  • @joaovictorvilar705
    @joaovictorvilar705 Před 3 lety +4

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

  • @DemsRNutless
    @DemsRNutless Před 5 měsíci +1

    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 Před 2 měsíci +1

      I know how to do that

    • @DemsRNutless
      @DemsRNutless Před 2 měsíci

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

  • @WormyLeWorm
    @WormyLeWorm Před 3 lety +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.

  • @avichi9175
    @avichi9175 Před 3 lety

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

  • @HK-sw3vi
    @HK-sw3vi Před 4 lety

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

  • @andrewliu2814
    @andrewliu2814 Před 2 lety

    You're a legend bro

  • @patriayvida4209
    @patriayvida4209 Před 3 lety +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  Před 3 lety +1

      Thank you 💪

    • @patriayvida4209
      @patriayvida4209 Před 3 lety

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

  • @gestata897
    @gestata897 Před 5 lety +18

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

  • @godfreyravhutsi6628
    @godfreyravhutsi6628 Před 4 lety +2

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

  • @bmfaysal33
    @bmfaysal33 Před 18 dny

    This video helped me very much. Thanks a lot.

  • @chelseakatsidzira7153
    @chelseakatsidzira7153 Před 4 lety +13

    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
      @dcode-software  Před 4 lety

      No probs!

    • @myronm5126
      @myronm5126 Před 4 lety +1

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

    • @chuksannoyxx-kt6ox
      @chuksannoyxx-kt6ox Před 4 lety

      @@myronm5126 True @Myron but i do both

    • @lyricalsongs3901
      @lyricalsongs3901 Před 2 lety

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

  • @mightydrew1970
    @mightydrew1970 Před rokem +1

    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!

  • @kkbennie
    @kkbennie Před 5 lety +3

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

  • @HEADSPACEnTIMING
    @HEADSPACEnTIMING Před 4 lety +1

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

    • @dcode-software
      @dcode-software  Před 4 lety

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

  • @21thTek
    @21thTek Před 4 lety +4

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

  • @senseitei
    @senseitei Před 4 lety +2

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

  • @Rozhan_Fard
    @Rozhan_Fard Před rokem

    thank you for the clear instructions.🙏🙏🙏

  • @shamiul_islam
    @shamiul_islam Před 3 lety +1

    Awesome!
    Easy to understand and nicely explained.

  • @jonathanlopes1434
    @jonathanlopes1434 Před rokem

    thank you guy, you help me a lot

  • @CodeWithLu
    @CodeWithLu Před 2 lety

    good looking table. Thanks so much

  • @locdang4042
    @locdang4042 Před 4 lety

    Easy to understand and powerful. Thanks.

  • @lucaaraneda-mayo4654
    @lucaaraneda-mayo4654 Před 2 lety +1

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

  • @TarunYadav-dp1id
    @TarunYadav-dp1id Před rokem

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

  • @LosingNemo
    @LosingNemo Před 5 lety +3

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

  • @programming2347
    @programming2347 Před 3 lety +4

    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

  • @husniddinsobirjonov532
    @husniddinsobirjonov532 Před 3 lety +2

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

  • @roguishowl3915
    @roguishowl3915 Před 3 měsíci

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

  • @karahitto
    @karahitto Před rokem

    So easy to follow, thank you so much

  • @ankamanirudh8837
    @ankamanirudh8837 Před 2 lety

    Excellent bro

  • @pysof
    @pysof Před 6 měsíci

    this was great, thank you for sharing it!

  • @kwokashley2000
    @kwokashley2000 Před 2 lety

    Simple and clear, thank you so much!!

  • @jamesmassa1999
    @jamesmassa1999 Před 3 lety

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

  • @philtyler4048
    @philtyler4048 Před 2 lety

    Love this!!!
    Thanks for the excellent tutorial

  • @abdullahzaqebah7919
    @abdullahzaqebah7919 Před 4 měsíci

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

  • @fuechsleit9229
    @fuechsleit9229 Před 2 lety

    this is gold!

  • @RottenbergZhenya
    @RottenbergZhenya Před 2 lety

    many thanks
    the table is indeed good-looking

  • @premkumarreyya9691
    @premkumarreyya9691 Před 2 lety

    Nice explanation loved it and thank you so much

  • @nathanstanfordsr
    @nathanstanfordsr Před rokem

    I really liked this video.

  • @scottsaccenti
    @scottsaccenti Před 3 lety

    Really good. Made everything simple.

  • @Abdulhadi102-n9c
    @Abdulhadi102-n9c Před 3 lety

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

  • @pete5370
    @pete5370 Před 4 lety +1

    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!

  • @bookingsessential
    @bookingsessential Před 2 lety

    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 ?

  • @gummex4192
    @gummex4192 Před rokem

    absolutely goated

  • @alexrepiscak7542
    @alexrepiscak7542 Před 2 lety

    very useful mate, thanks

  • @aliata9154
    @aliata9154 Před 2 lety

    awesome tutorial thank you

  • @mr.webdev3700
    @mr.webdev3700 Před 5 lety +2

    Great video!

  • @prasadmadushan
    @prasadmadushan Před 4 lety

    Thank you so much for your time and code

  • @pereznicollaine5380
    @pereznicollaine5380 Před 3 lety

    Very Satisfiying Bro Thankyou so much !

  • @tradewinds9832
    @tradewinds9832 Před 3 lety +1

    It is topnotch. Thanks a lot man.

  • @duvanxo3033
    @duvanxo3033 Před 3 lety

    Nice video man! Gracias! subscribed !!

  • @user-hl5be3vg8o
    @user-hl5be3vg8o Před 2 lety

    Thx, very nice table! :)

  • @argedinopasoles
    @argedinopasoles Před 3 lety

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

    • @cognitivetech8323
      @cognitivetech8323 Před 3 lety

      Hey Argedino, for such beginner content check this out for HTML forms czcams.com/video/TzXL4YZ3iOQ/video.html

  • @ajithkx
    @ajithkx Před 3 lety +1

    What font did you use?

  • @medAmineRg
    @medAmineRg Před 3 lety

    thanks dom

  • @cake6667
    @cake6667 Před rokem

    thank you mr! i love you

  • @aleksnikolov9097
    @aleksnikolov9097 Před 10 měsíci

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

  • @anabellhr5955
    @anabellhr5955 Před 2 lety

    That was amazing, thank you!

  • @vishalambavade8539
    @vishalambavade8539 Před 3 lety +4

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

  • @carolinadeungaro4436
    @carolinadeungaro4436 Před 4 lety

    very very usefull, and congrats for the presentation

  • @keesbesterveld4730
    @keesbesterveld4730 Před 4 lety +2

    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!

  • @photoinshot1355
    @photoinshot1355 Před rokem +1

    Great well explained video, thanks! Would be very interesting to see how you could make the active class dynamic, so you could show the logged in users details highlighted with the active class.

  • @alexiospapadopoulos9601

    Great tutorial. Subscribed.

  • @samartharora638
    @samartharora638 Před 3 lety

    Thank you brother

  • @ctx4241
    @ctx4241 Před 3 lety +1

    what font are you using in VSC?

  • @aurelieneveu9595
    @aurelieneveu9595 Před rokem

    thanks a lot, great tuto !

  • @bitpilot79
    @bitpilot79 Před 5 lety +3

    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
      @dcode-software  Před 5 lety

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

    • @bitpilot79
      @bitpilot79 Před 5 lety

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

    • @dcode-software
      @dcode-software  Před 5 lety

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

  • @adhaengineer6000
    @adhaengineer6000 Před 4 lety

    Other Thanks you for your Html work but I liked your speed of Typing that is just wow

  • @rajbannasa7662
    @rajbannasa7662 Před 2 lety

    Thank you so much sir 😊

  • @otupchiienko
    @otupchiienko Před 2 lety

    thank you! nice work!)

  • @karlennis3448
    @karlennis3448 Před 2 lety

    great content!!!!!

  • @RuleSuccess.
    @RuleSuccess. Před 2 lety

    Bro thank you so much ❤

  • @gabrielnhambirri
    @gabrielnhambirri Před 5 měsíci

    Thanks bro!

  • @imchundangful
    @imchundangful Před 4 lety

    very stylish table!

  • @GoodGuy374
    @GoodGuy374 Před 4 lety +2

    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
      @softwarelivre2389 Před 3 lety +1

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

  • @albumjsk_archive5199
    @albumjsk_archive5199 Před rokem

    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{} ?

  • @chloesharp9546
    @chloesharp9546 Před 3 lety

    thanks dude, helped me :)

  • @midonlyadyana2314
    @midonlyadyana2314 Před 2 lety

    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

  • @javieralvarez5842
    @javieralvarez5842 Před 3 lety

    goog work dom

  • @joaofsfranco
    @joaofsfranco Před 2 lety

    Great job, thank you!

  • @o.fm.a5573
    @o.fm.a5573 Před 8 měsíci

    what font family are you using? great video super understandable

  • @kaoup3299
    @kaoup3299 Před 3 lety

    Thank you for this sir 🙏

  • @slimanemzerguat3298
    @slimanemzerguat3298 Před 4 lety

    thanks bro that was so clean and attractive

  • @fanaticbark4856
    @fanaticbark4856 Před 3 lety

    Thank you it helps a lot 😊

  • @reginemargareta4460
    @reginemargareta4460 Před 4 lety

    life saver! thank you