HTML Tables Tutorial with CSS Styling - Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ม.ค. 2025

ความคิดเห็น • 181

  • @FollowAndrew
    @FollowAndrew  3 ปีที่แล้ว +17

    It's hard to believe how for the web has come since I used to use transparent 'spacer.gif' hacks to make tables useful for page layout! :). Subscribe up already!

  • @ian5600
    @ian5600 3 ปีที่แล้ว +34

    This man actually deserve more than he's getting on yt right now.

    • @widespectrumcreators4691
      @widespectrumcreators4691 2 ปีที่แล้ว +1

      i am also suprised… one of best ilustrated tutorial i have seen…

  • @bradcasper4823
    @bradcasper4823 2 ปีที่แล้ว +18

    This is honestly one of the best videos explaining tables more deeply. Thank you.

    • @tedfineline
      @tedfineline 2 ปีที่แล้ว +2

      exactly my thoughts

  • @katr810
    @katr810 ปีที่แล้ว +2

    Even it’s two yrs old, this has been so clearly explained that now I have an idea of how table, & table nesting works, thanks

  • @santiagosalinasuy
    @santiagosalinasuy 3 ปีที่แล้ว +12

    Amazing! Came for a clear explanations for colspan & rowspan and stayed for everything else!!

  • @KeepCalmAndTravelOn
    @KeepCalmAndTravelOn 2 ปีที่แล้ว +8

    How to spot a newbie? He's watching HTML table building videos at 1AM and enjoying it.

  • @sajeelkhan1450
    @sajeelkhan1450 2 ปีที่แล้ว

    This is the best ever video on conceptualizing the tables on the entire internet. Thank you sir!!!

  • @victoriabillah6125
    @victoriabillah6125 ปีที่แล้ว

    what a thorough tutorial ! it is a shame that is did not watch it before, the thumbnail threw me away but you explained it in a very detailed way. Thank you

  • @John223
    @John223 3 ปีที่แล้ว +7

    Clean, informative, easy to digest. Thank you.

  • @tonytony-fc6gq
    @tonytony-fc6gq 3 ปีที่แล้ว +1

    THANK YOU VERY MUCH !!!!!!!!!!!!! FANTASTIC!!!!!!!!! this helped me soo much in html emails , it was so hard to find a video tutorial this detailed

  • @ze_chooch
    @ze_chooch 3 ปีที่แล้ว

    Never needed tables until I got email templating work. Thank you for the help.

  • @exciraofficial7218
    @exciraofficial7218 2 ปีที่แล้ว

    You got a like, a subscriber and a buzzer on from an old guy. TNice tutorials is the best soft soft tutorial I've seen so far. You covered a lot of

  • @MamiOtweet
    @MamiOtweet 2 ปีที่แล้ว

    Thank you Andrew, God bless you more blessings and wisdom!

  • @crispinthomas2992
    @crispinthomas2992 2 ปีที่แล้ว +2

    Excellent job, very clear and concise explanations! Thanks for filling in some gaps in my understanding and opening up the CSS door to styling my tables.

  • @t44ha
    @t44ha 2 ปีที่แล้ว

    i love when he tests it out for us

  • @followying392
    @followying392 3 ปีที่แล้ว

    so great , the approach is so clearly shown to understand, better than the teacher in my class.

  • @aimreacts8594
    @aimreacts8594 3 ปีที่แล้ว

    your explanation is really clear I have been searching for someone who can explain to me the table things but I couldn't find one until now. thankyou very much sir.

  • @Sabnas117
    @Sabnas117 ปีที่แล้ว

    Honestly ur a great Teacher and thank u for ur explanation u just earned a sub

  • @lithiumwarhead
    @lithiumwarhead ปีที่แล้ว

    Thank you for sharing, phenomenal teaching skills, very much appreciated.

  • @UlyssesStudios
    @UlyssesStudios 2 ปีที่แล้ว

    That's an exceptional tutorial. The best!

  • @russellmyers100
    @russellmyers100 ปีที่แล้ว

    Thanks, don't know why everyone else makes it so hard!😃

  • @joshuaogah587
    @joshuaogah587 2 ปีที่แล้ว

    Super clear. Thanks, Andrew!

  • @davidhill4627
    @davidhill4627 ปีที่แล้ว

    dude you are the best! you helped me with a project! Than YOU!

  • @Mdroudian
    @Mdroudian 2 ปีที่แล้ว

    Man... great video... you kept it simple from beginning to the end and understandable. I'll be subscribing.

  • @Varkode248
    @Varkode248 ปีที่แล้ว

    I’m blessed from this sir✌🏽

  • @ashwathivalsaraj8964
    @ashwathivalsaraj8964 2 ปีที่แล้ว

    year for all of us, for so- it's still ongoing. i respect you for being honest as that's what's been keeping a bit sane recently, just being

  • @aieazza3727
    @aieazza3727 2 ปีที่แล้ว

    The introduction was very helpful, thanks!

  • @josephgarza5973
    @josephgarza5973 2 ปีที่แล้ว

    Cool mang! Loved your video. It was really very helpful. You are awesome. Keep up the hard work.

  • @sylviogiraldes
    @sylviogiraldes 2 ปีที่แล้ว +1

    Congratulations. This class was very well planned. No repetition, only substantial information. Can you provide some hints on how to build a scrollable table ? Thank you Andrew.

  • @Victoria_rga
    @Victoria_rga 2 ปีที่แล้ว

    Great job buddy, keep it up!

  • @arconsultantsye
    @arconsultantsye 3 ปีที่แล้ว +2

    Thank you for that clear and detailed tutorial
    Keep it up
    Wish you all the best

  • @adarshtiwari7395
    @adarshtiwari7395 2 ปีที่แล้ว

    Super amazing Andrew!

  • @danteaguilar2702
    @danteaguilar2702 2 ปีที่แล้ว

    I had no idea tNice tutorials blew up until now holy sNice tutorialt

  • @ciyaarahadunidaoffical5474
    @ciyaarahadunidaoffical5474 2 ปีที่แล้ว

    Very nice explanatory video!

  • @JayPatelYouTube
    @JayPatelYouTube 2 ปีที่แล้ว

    aah, i just got into making soft rn and tNice tutorials is so helpful and your voice is so sootNice tutorialng btw! thanks for tNice tutorials tutorial

  • @ShubhamSingh-sn9cy
    @ShubhamSingh-sn9cy 2 ปีที่แล้ว

    I basically know everytNice tutorialng there is to know about soft soft but I still watched tNice tutorials through just because of how good you explained

  • @youniverseapparel539
    @youniverseapparel539 2 ปีที่แล้ว

    Thanks man, I got the good habit of wanting to learn everytNice tutorialng before I start sotNice tutorialng (wNice tutorialch is impossible) tNice tutorials quick guide is what I

  • @madushawarnakulasuriya4936
    @madushawarnakulasuriya4936 2 ปีที่แล้ว

    works like a charm. Many many thanks

  • @djohnworthy1040
    @djohnworthy1040 ปีที่แล้ว

    I have an img inside my . When I put a img there is a cushion as you said on top bottom left and right. How do I make the extra space go away? I want my cell to shape like the image. I mean you say the padding is prevent the content to go to the border. My images are like that too 5:54. How can I fix that make my images and my cells as a whole. Also how can I maintain personal cell width and heights. I don't want to change all the cell and rows.

  • @ViktoriyaShnayder
    @ViktoriyaShnayder ปีที่แล้ว

    Thank you so much for good details :)

  • @heshambakir6357
    @heshambakir6357 2 ปีที่แล้ว

    You are a legend, you helped a lot and you explained it really great!

  • @prachipatel-ff3eh
    @prachipatel-ff3eh 3 หลายเดือนก่อน +1

    What can I do for merging 1.5 column? Becoz colspan doesn't accept 1.5 value 🤔

  • @sa-rah-a
    @sa-rah-a 2 ปีที่แล้ว

    Perfect explanation.Makes me subscribe!

  • @danielChibuogwu
    @danielChibuogwu ปีที่แล้ว

    Thank you for this video, it was really helpful

  • @imadbabi7646
    @imadbabi7646 2 ปีที่แล้ว

    you are so helfull man god bless you love from india

  • @kamshatsaduakassova9533
    @kamshatsaduakassova9533 3 ปีที่แล้ว

    Very nice explanation indeed! You deserve more likes and subscribers! :-) I have been trying to solve this rowspan and colspan task for two days and today I did it finally! Thanks a lot!

  • @shortsbyanjanlrka
    @shortsbyanjanlrka 2 ปีที่แล้ว

    Great video and really helpful! I couldn't get a grasp on how the setuper works but it's all clear now.

  • @BhrKumar
    @BhrKumar ปีที่แล้ว

    Wish I could give more than one like!

  • @kostiantynkarzhanov9216
    @kostiantynkarzhanov9216 ปีที่แล้ว

    Awesome and very good explained tutorial! Andrew, thank you very much! 💛

  • @alexj4725
    @alexj4725 2 ปีที่แล้ว

    Excellent tutorial. Thanks Andrew

  • @muhammadfaizan8117
    @muhammadfaizan8117 2 ปีที่แล้ว

    ty cuz ive been having a hard ti getting started.

  • @widespectrumcreators4691
    @widespectrumcreators4691 2 ปีที่แล้ว

    Very very good video! congrats

  • @CesarJuarezVargas
    @CesarJuarezVargas 3 ปีที่แล้ว

    What method would you recommend to insert an empty row with the table? Would   suffice or should we consider CSS approach? Txs!

  • @SanjaArctica3
    @SanjaArctica3 2 ปีที่แล้ว +1

    an absolutely amazing tutorial!

  • @starrynight6982
    @starrynight6982 2 ปีที่แล้ว

    style I downloaded the demo to soft soft yesterday, and I'm going to learn from you to make my own stuff, and I wanted to leave tNice tutorials

  • @NejdetACAR
    @NejdetACAR 3 ปีที่แล้ว +1

    Hello Andrew,
    I do not understand English very well.
    For this reason and because you speak very fast, I cannot follow your verbal expression exactly, but I can understand the subject because you explain it visually in detail.
    Thank you for your services.
    Greetings from Istanbul.

    • @FollowAndrew
      @FollowAndrew  3 ปีที่แล้ว +1

      You bet! I do not know why, but on this tutorial the video overlay of myself was skipping frames, so the audio is not exactly in sync with my lips, making it even harder to follow for non-native English speakers!

    • @NejdetACAR
      @NejdetACAR 3 ปีที่แล้ว +1

      @@FollowAndrew No problem, we Turks and novice designers like me sometimes watch the videos of our experienced teachers like you many times, we even download them to our computers and save them for future viewing. Sometimes we do not leave the video until we get the point, sometimes pausing and watching the video over and over again. :D :)

  • @FightFookingClub
    @FightFookingClub ปีที่แล้ว

    Right to the point👌

  • @vlastimilslechta8927
    @vlastimilslechta8927 2 ปีที่แล้ว

    very nice. helped me to understand better. thank you

  • @ssgoh4968
    @ssgoh4968 2 ปีที่แล้ว

    Very informative video. Thank you for your effort.

  • @ghanendrapanwar165
    @ghanendrapanwar165 2 ปีที่แล้ว

    Super easy after watching......

  • @creativosanecaf502
    @creativosanecaf502 2 ปีที่แล้ว

    thanks bro regards from Syria

  • @ravenclairerodriguez2014
    @ravenclairerodriguez2014 2 ปีที่แล้ว

    Great job ❤️ Big thanks!

  • @sahirulwebofficial7375
    @sahirulwebofficial7375 2 ปีที่แล้ว

    Very helpful video. Keep it up bro...👍

  • @imacoder7122
    @imacoder7122 3 ปีที่แล้ว

    Thank you so much👍🙏. Awesome.

  • @En4zo
    @En4zo 2 ปีที่แล้ว

    Hey, I'm just starting to get into making soft and tNice tutorials 17 minute video helped a LOT MORE than those one hour long tutorials out

  • @orincywhytedesigns
    @orincywhytedesigns 3 ปีที่แล้ว

    You are an incredible teacher!!!! Have any videos explaining min-width and max-width? 😂😂 i cant seem to comprehend

  • @oscarjavierjuarezgomez2551
    @oscarjavierjuarezgomez2551 2 ปีที่แล้ว

    Great video!

  • @chichebem
    @chichebem 2 ปีที่แล้ว

    This is amazing!

  • @ComputerScienceSimplified
    @ComputerScienceSimplified 3 ปีที่แล้ว +1

    Amazing video, keep up the awesome work! :)

  • @otmaneelkabdani3142
    @otmaneelkabdani3142 2 ปีที่แล้ว

    THANK YOU!! ✌

  • @MehndiBySoukayna
    @MehndiBySoukayna 2 ปีที่แล้ว

    That amaaaaaaazinggg🎉

  • @albikazia4304
    @albikazia4304 2 ปีที่แล้ว

    I have a question on soft soft v20. I have it installed and have played around with it a little. However, I have a very specific goal. I am

  • @pinpon163
    @pinpon163 2 ปีที่แล้ว

    Failed a major internship interview because of tables. I never bothered to learn them. I solved the problem with grid, but I was grilled on why I didn't use tables by the interviewer.

  • @nm_s1956
    @nm_s1956 3 ปีที่แล้ว

    Thanks, great lesson! 😊

  • @marcuslymberis6188
    @marcuslymberis6188 2 ปีที่แล้ว

    how can you allow text inputs in the cells, if you want the user to be able to type into the table?

  • @Pareshbpatel
    @Pareshbpatel 3 ปีที่แล้ว

    Very comprehensive tutorial on HTML Tables. Thank you very much.
    PS Subscribed!
    {2021-06-26}

  • @shaikasif3356
    @shaikasif3356 2 ปีที่แล้ว

    saved my life

  • @mncreations2857
    @mncreations2857 2 ปีที่แล้ว

    my laptop speakers. Any suggestions on what to do to get my soft back? I recently updated. Any help would be greatly appreciated.

  • @austinhomolka
    @austinhomolka 2 ปีที่แล้ว

    great video thanks!

  • @SamyarBorder
    @SamyarBorder 2 ปีที่แล้ว

    Can you share your VS Code them and extensions ?

  • @austinhomolka
    @austinhomolka 2 ปีที่แล้ว

    Thank you!

  • @mariannesaha7442
    @mariannesaha7442 2 ปีที่แล้ว

    It doesn’t quite go into the sa level as detail as Lypur’s videos, but it gives you a great overview of the “basics” - so that you can start

  • @GerritforBazeja
    @GerritforBazeja 3 ปีที่แล้ว

    Thank you. nice to know!!

  • @adelabdelsadok576
    @adelabdelsadok576 2 ปีที่แล้ว

    Can you tell how to change softal instrunt in Serum, please ?!

  • @JANKTOME
    @JANKTOME 3 ปีที่แล้ว

    that was awesome.

  • @bousshorts
    @bousshorts 2 ปีที่แล้ว

    Thank you.

  • @abebrosiczki637
    @abebrosiczki637 3 ปีที่แล้ว +1

    Thx!

  • @mafiyaproduction5570
    @mafiyaproduction5570 2 ปีที่แล้ว

    how can i add a ?

  • @metalskull8687
    @metalskull8687 2 ปีที่แล้ว

    You just saved my ass from tomorrow's test. Thanks.

  • @avjvfx6484
    @avjvfx6484 2 ปีที่แล้ว

    Best guy I got everytNice tutorialng for free also but I rather buy soft so I can be happy and proud I get a official version.

  • @heather11a
    @heather11a ปีที่แล้ว

    Great explanation, but unfortunately I am a COMPLETE newbie to anything code related. I am having to use Notepad++ for my HTML as it is easy to make the pages I need to share with my colleagues (it is a localised knowledgebase that I am trying to put together).
    I really didn't understand how to do the CSS part. Is this a separate programme to what I am using, or can I still use my Notepad++ to create better looking tables?
    I need the source of the pages to be on each of my colleagues laptops for them to use the site I'm creating as it is for internal use only and we do not have a shared drive at work. (i.e. they have a copy of the folder with every page in it saved to their laptop and I send them the new / edited .html files to save locally)
    I am not even sure I am making sense, as I am not too sure what it is I want to do, other than have better looking tables, on my internal site that is shared (badly) with my colleagues and be able to do it in Notepad++ lol

  • @Stimpac89
    @Stimpac89 10 หลายเดือนก่อน

    What program are you using for coding? looks very streamlined

  • @divinity1210
    @divinity1210 3 ปีที่แล้ว

    Hi Andrew. I need your help, and would appreciate it if you could respond quickly. I am able to adjust the width of my first 4 columns. However, when I add a width for my last (5th) column, the width of all the columns changes and the changes only go if I remove the width. Could you please tell what I'm doing wrong?

  • @merisbatak9097
    @merisbatak9097 2 ปีที่แล้ว

    I just download soft soft. Are you using the paid version or the free tutorial one? Because your screen looked way different than mine.

  • @iherdu2
    @iherdu2 3 ปีที่แล้ว

    This video is amazing and really helps in understanding how to make an HTML table. Do you link to making links inside of a table or how to get a table to pull information from a database in a autofill type setting?

  • @daniellevarela2913
    @daniellevarela2913 3 ปีที่แล้ว

    For some reason my table can't be changed with either inline css or in the style tag. I'm viewing it on chrome, no idea why its happening. Tried the display: table; table-layout:fixed; trick but thats not working either. This is with some of the most basic html you can have:
    Title of the document


    Just some text


    also some text


    Does anyone have any idea why?? Should I just be making this in flex and nix tables altogether? This is for data/numbers specifically.

  • @constantine9074
    @constantine9074 ปีที่แล้ว

    great tutorial !! what theme are you using? or isit custommade?

  • @ChristopherPhillipsDev
    @ChristopherPhillipsDev 3 ปีที่แล้ว +1

    Hi Andrew, Thanks for the great tutorial. I'm running into a bit of a snag though. If you, or anyone, can help me figure it out, i'd appreciate it.
    Let's say i have a table:
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    I'm trying to colspan 1 and 2, 6 and 7, and 11 and 12. If I do the colspans on the first 2 rows, they show up correctly. But after I do the final row, I no longer have any merged cells. It's as if I didn't do a colspan at all on anything. What's going on??

    • @FollowAndrew
      @FollowAndrew  3 ปีที่แล้ว +1

      If you collapse 1 and 2, 6 and 7, and 11 and 12 then you've essentially taken out an entire column, so there would be no need for 1,6,11 in the first place. Just build a 4-column table (with no spans) instead of a 5-column table

    • @ChristopherPhillipsDev
      @ChristopherPhillipsDev 3 ปีที่แล้ว +1

      @@FollowAndrew I was just trying to make the first column larger to fit names. Accomplished this by giving the respecting data elements a class and making them wider. Thanks for the input!

  • @BiteSizedFood434
    @BiteSizedFood434 2 ปีที่แล้ว

    Thank you fam

  • @francislambert5189
    @francislambert5189 2 ปีที่แล้ว

    SUBSCRIBED..!! This will be great.