HomeОбразованиеRelated VideosMore From: tbate54

Make Advanced Tables Using HTML & CSS

478 ratings | 91859 views
Learn how to make an AFL Top 8 Ladder web page by using HTML and CSS. This is a slightly more advanced table than in the previous tutorial.
Html code for embedding videos on your blog
Text Comments (53)
Nitin Gupta (1 month ago)
Very nice video. I love it
boletusam2 (1 month ago)
tip of the day: to better paste go before the item you want to pase press ctrl+d to duplicate the items
Chetam Lucas Okafor (2 months ago)
For those people that disliked this video, what's your problem in life?
tbate54 (2 months ago)
Thanks mate. You're a legend.
whshockey1020 (2 months ago)
this transformed my table. Thank you!
khairul hadi (2 months ago)
Your voice is kind a rough and sound unclear to me.. Leaving this comment here
tbate54 (2 months ago)
Sorry mate, it's what the ladies want. It's called 'husk'. I cannot change this just for you.
Yakindra Rawal (3 months ago)
One of the most tutorial I learning how to create calendar through to HTML and CSS I like this video
HadstfuDsod8520 test (3 months ago)
You can't make advanced tables, html tables are basic knowledge
tbate54 (3 months ago)
HadstfuDsod8520 test Well, it's helped a few people out to make fancier tables than usual. It's advanced for us folk that aren't quite as smart.
HadstfuDsod8520 test (3 months ago)
No its not that, I mean someone can make it more advanced with CSS but normally in html tables are just tables, not like hard programmed kernel files. You'll understand
tbate54 (3 months ago)
HadstfuDsod8520 test Show me more advanced HTML tables then...
Nathan S.R. (4 months ago)
Thank you for this video. I have written a script now, to convert any file or a command output, into a html table. Sharing it, for the benefit of others, here : https://sourceforge.net/projects/command-output-to-html-table/
ch sairam (6 months ago)
thank you very much..
JITENDRA SONI (6 months ago)
Respected sir, Please please make a videos on " display: table " in css3. I am watching your videos.
Saurabh Singh (7 months ago)
Nice sir
Saurav Baral (8 months ago)
Excellent video
idi hujan (8 months ago)
hello, can i get the code plz plz...thank you
tbate54 (8 months ago)
No, sorry. It defeats the purpose of the tutorial. Go watch and learn some code!
Alexander Adamson (9 months ago)
Great video, learnt lots...thanks!
Sekou Jabateh (10 months ago)
Thanks you so much! Appreciated!
Austin Pasquale (11 months ago)
Excellent tutorial! Thanks!
Prashant Uprety (1 year ago)
thank you so much for such a beautiful video, i started by watching your video . thanks a lot
SAŠA MRAOVIĆ (1 year ago)
puno dobru !
Edward Harmoush (1 year ago)
Great video. My friend... you should use the Live Preview, it will let you show changes to your CSS "live" on a browser without having to save and refresh. Check it out: https://www.youtube.com/watch?v=cRgqJUtq478
Ed Martell Regala (1 year ago)
can u also add a tutorial on table color hover design? its when you click on a row or column it highlights or color out the entire row or column on it
Heinz Fretton (1 year ago)
very helpful...awesome work
3dmaster (1 year ago)
tankhssssssssssssssssssssssssssssssss
Clifford Mathew (1 year ago)
Thank you very much for taking the time to make and upload this video. It really helped. Also noticed your editor "Brackets" -- and I am downloading that too!
Vladimir Domin (1 year ago)
Well done, nice video. I learned few new things and found new great editor. Thanks mate
Your The BEST!!!!
Frederic Boudreau (1 year ago)
You just earned yourself a sub... a loyal one. Amazing video, keep it up mate
FiFiFilth (1 year ago)
Brackets is an amazing editor, very helpful
emir kovacevic (1 year ago)
what does mean :nth ? and how did you delete top right block of table ?
tbate54 (1 year ago)
emir kovacevic 21:30 mark
tbate54 (1 year ago)
emir kovacevic I see now. You need to make the first row span across all the columns. It's the 'colspan' section of code. Fast forward the video until you find it.
emir kovacevic (1 year ago)
Bro here is picture its not perfect rect.: http://prntscr.com/ejaal6
tbate54 (1 year ago)
emir kovacevic I'm still not sure what you mean by this. My table in the video is a perfect rectangle. If yours comes out another shape, maybe rewatch the video and check the code carefully. Good luck!
emir kovacevic (1 year ago)
Thx for nth explanation , top right section of table , i mean its not square table its like L shape |------ __ |______|
Jorge Mongelos (1 year ago)
Best tutorial ever about styling tables! Thank you so much for sharing your knowledge! I appreciate it.
Sander Luyckx (1 year ago)
Thank you! Best tutorial for tables.
aashish nagpure (1 year ago)
which text editor have you used?
Christoffer (1 year ago)
I recommend Caret, it's a chrome extension but it's better than any other text-editor
tbate54 (1 year ago)
aashish nagpure Hi! I used Brackets. It's free to download from brackets.io Sublime is another good text editor that's free to get as well.
andreas xristou (1 year ago)
perfect !
Rich (1 year ago)
U are a beast! Beautiful vid
Aminur Rahman (2 years ago)
I came back to the video after I downloaded it to like the video.. Awesome voice and teaching style.
hraqhraq (2 years ago)
One of the best tutorials I have seen on Youtube till now about html/css
La Puissance Tanatos (1 year ago)
HTML
TechWizards (2 years ago)
Very good video much appreciated sir :). There's just one thing. As ids have too much precedence in terms of specificity, I feel that using attribute selectors would be more efficient. Also, I used a very basic attribute selector to target the colspan attribute within the td tag to colour the title; although this can get messy shall the colspan be changed ever. But here you go: td[colspan]{ background: blue; }
Twent (1 year ago)
thanks heaps that fixed my problem
TechWizards (2 years ago)
+TechWizards I have noticed that shall I ever use a colspan for a td again it will conflict. Therefore I have used an attribute selector to lower the precedence of using a regular id: td[id="table-title"]{ background: blue; } <tr> <td id="table-title" colspan="3"><h1>Java 1.8 Complete Tutorial Set</h1></td> </tr>

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.