HTML Tables Tutorial with CSS Styling - Crash Course

Learn all about HTML tables in this crash course tutorial. We walk through the basics of understanding tables, table rows, table data cells and learn several tips and tricks for building more advanced tables with spans (both colspan & rowspan). Finally we look at how to create a real-life working table complete with CSS styling that contains thead, tbody, & tfoot elements!
Like & Sub. Comment & Enjoy. Eat & Sleep.
💖 SUBSCRIBE (Please) 💖
kzbin.info?s...
TIMESTAMPS
00:00 - Intro
01:00 - Rows & Data Cells
02:48 - Spans (merge cells)
04:01 - Cell Alignment (vertical & horizontal)
04:46 - Table Header, Body, & Footer
05:25 - Cell Padding & Cell Spacing
06:23 - Table Width & Height
07:22 - Nested Tables
08:16 - Deprecated Table Attributes
08:52 - Real World Table HTML
13:21 - Real World Span
18:02 - Real World CSS Styling of Tables
28:47 - El Fin
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#tables #html #tutorial #webdev

[@FollowAndrew]

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!

[@KeepCalmAndTravelOn]

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

[@FollowAndrew]

A true coder!

[@ian5600]

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

[@widespectrumcreators4691]

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

[@bradcasper4823]

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

[@tedfineline]

exactly my thoughts

[@katr810]

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]

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

[@crispinthomas2992]

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.

[@John223]

Clean, informative, easy to digest. Thank you.

[@sylviogiraldes]

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.

[@chapstickbabe]

Thank you for this !! So easy to follow and great explanations along the way.

[@Mdroudian]

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

[@arconsultantsye]

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

[@sajeelkhan1450]

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

[@shortsbyanjanlrka]

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

[@kostiantynkarzhanov9216]

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

[@joshuaogah587]

Super clear. Thanks, Andrew!

[@lithiumwarhead]

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

[@russellmyers100]

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

[@tonytony-fc6gq]

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

[@followying392]

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

[@MamiOtweet]

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

[@ulyssesoliveira1106]

That's an exceptional tutorial. The best!

[@aieazza3727]

The introduction was very helpful, thanks!

[@heshambakir6357]

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

[@josephgarza5973]

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

[@SanjaArctica3]

an absolutely amazing tutorial!

[@exciraofficial7218]

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

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

[@ViktoriyaShnayder]

Thank you so much for good details :)

[@ComputerScienceSimplified]

Amazing video, keep up the awesome work! :)

[@alexj4725]

Excellent tutorial. Thanks Andrew

[@danteaguilar2702]

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

[@kamshatsaduakassova9533]

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!

[@ghanendrapanwar165]

from 2 hrs after video in 2 minutes

[@ashwathivalsaraj8964]

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

[@davidhill4627]

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

[@ravenclairerodriguez2014]

Great job ❤️ Big thanks!

[@sa-rah-a]

Perfect explanation.Makes me subscribe!

[@muhammadfaizan8117]

ty cuz ive been having a hard ti getting started.

[@madushawarnakulasuriya4936]

works like a charm. Many many thanks

[@Varkode248]

I’m blessed from this sir✌🏽

[@danielChibuogwu]

Thank you for this video, it was really helpful

[@ze_chooch]

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

[@nm_s1956]

Thanks, great lesson! 😊

[@ciyaarahadunidaoffical5474]

Very nice explanatory video!

[@CesarJuarezVargas]

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

[@imacoder7122]

Thank you so much👍🙏. Awesome.

[@Victoria_rga]

Great job buddy, keep it up!

[@vlastimilslechta8927]

very nice. helped me to understand better. thank you

[@t44ha]

i love when he tests it out for us

[@ssgoh4968]

Very informative video. Thank you for your effort.

[@Sabnas117]

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

[@adarshtiwari7395]

Super amazing Andrew!

[@ShubhamSingh-sn9cy]

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

[@jakobz_lore9559]

Good stuff thanks for posting!

[@GerritforBazeja]

Thank you. nice to know!!

[@austinhomolka]

great video thanks!

[@aimreacts8594]

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.

[@FollowAndrew]

Great to hear!

[@JayPatel-hs7po]

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

[@widespectrumcreators4691]

Very very good video! congrats

[@austinhomolka]

Thank you!

[@FightFookingClub]

Right to the point👌

[@ghanendrapanwar165]

Super easy after watching......

[@OrincyWhyteDesigns]

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

[@sahirulwebofficial7375]

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

[@oscarjavierjuarezgomez2551]

Great video!

[@chichebem]

This is amazing!

[@youniverseapparel539]

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

[@imadbabi7646]

you are so helfull man god bless you love from india

[@otmaneelkabdani3142]

THANK YOU!! ✌

[@Pareshbpatel]

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

[@iherdu2]

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?

[@starrynight6982]

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

[@pinpon163]

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.

[@bousshorts]

Thank you.

[@creativosanecaf502]

thanks bro regards from Syria

[@ShivshankarPirgonde-oz6eg]

Wish I could give more than one like!

[@JANKTOME]

that was awesome.

[@abebrosiczki637]

Thx!

[@user-dj5tu7cx6s]

Thx a lot

[@MehndiBySoukayna]

That amaaaaaaazinggg🎉

[@dongiannisiliadis9018]

thank you sir

[@BiteSizedFood434]

Thank you fam

[@patriayvida4209]

Hello my friend ! Thanks for sharing this video. Very interesting and detailed. By the way I have a question: Is there a way to vertically align the TOTAL ? Looks moved a bit to the right... I'd like to do that. Thanks again and keep up the great work you've been doing ! Cheers from Miami!

[@FollowAndrew]

Yeah, you can use the 'vertical-align:top' in your css if you just add a class to that TOTAL td.

[@shaikasif3356]

saved my life

[@NejdetACAR]

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]

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]

@@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 :)

[@En4zo]

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

[@mariannesaha7442]

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

[@metalskull8687]

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

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

[@diandraherdani7870]

Nice Bang..

[@constantine9074]

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

[@FollowAndrew]

Custom CSS

[@avjvfx6484]

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.

[@Total_Studios_Games]

don't give up!, there are more difficult programs then tNice tutorials one

[@Stimpac89]

What program are you using for coding? looks very streamlined

[@albikazia4304]

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

[@marcuslymberis6188]

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

[@plelkes]

Thanks for a great tutorial! Have a small problem: trying to center the cell contents in thead & tbody. In that case, what I understand text-align should be used. I´ve tried with: .points-table thead tbody tr td { text-align: center; } but the text don't get centered Thanks in advance regards Peter

[@FollowAndrew]

Your selector looks wrong. thead shouldn't be a parent of tbody. They should be siblings. Remove the 'thead' (or tbody) and it should work.

[@mncreations2857]

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

[@merisbatak9097]

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

[@divinity1210]

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?