How to Create Tables in HTML | HTML5 Table Tutorial

Подписаться 313 тыс.

Просмотров 21 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to create tables in HTML. In this HTML5 table tutorial, you will learn how to add a table to your web page. You will also learn the available attributes to help you design your table with semantics and accessibility in mind.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of an HTML for Beginners tutorial series playlist:
• HTML Tutorials for Beg...
🔗 Starter Source Code: github.com/gitdagray/html_cou...
📬 Course Updates ➜ courses.davegray.codes/
How to Create Tables in HTML | HTML5 Table Tutorial
(00:00) Intro
(00:05) Welcome
(00:25) When and when NOT to use tables
(01:04) Creating a basic table
(04:16) Adding a small amount of CSS
(04:41) Table width is based on content
(05:38) Adding table headings
(06:35) colspan attribute
(07:05) rowspan attribute
(07:47) Table semantics
(08:11) Caption element
(08:51) thead, tbody, and tfoot elements
(11:04) Adding row headings
(13:15) scope attribute
(15:32) Validate your HTML code
🔗 All Resources for this HTML Tutorial Series: github.com/gitdagray/html_course
⚙ Web Dev Tools:
Chrome Browser: www.google.com/chrome/
Dark New Tab Chrome Extension: chrome.google.com/webstore/de...
Visual Studio Code (VS Code): code.visualstudio.com/
Prettier VS Code Extension: marketplace.visualstudio.com/...
vscode-icons VS Code Extension: marketplace.visualstudio.com/...
Github Themes VS Code Extension: marketplace.visualstudio.com/...
W3C HTML Validator: validator.w3.org/
HTML5 Outliner: chrome.google.com/webstore/de...
📚 References:
MDN HTML: developer.mozilla.org/en-US/d...
MDN HTML Elements Reference: developer.mozilla.org/en-US/d...
HTML Entities Character Chart: html.spec.whatwg.org/multipag...
🚀 Semantic HTML References:
MDN Web Glossary for Semantics: developer.mozilla.org/en-US/d...
w3Schools Semantic HTML: www.w3schools.com/html/html5_...
MDN Document and website structure: developer.mozilla.org/en-US/d...
🚀 HTML Table References:
MDN Table Basics: developer.mozilla.org/en-US/d...
MDN Advanced Tables and Accessibility: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about creating HTML Tables helpful? If so, please share. Let me know your thoughts in the comments.
#html #html5 #tables

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@DaveGrayTeachesCode 2 года назад

Once upon a time, HTML tables were used to layout entire pages (think 90s and early 00s). Don't do that now! However, HTML5 tables still have some great uses for data that is best represented in a tabular display. This tutorial walks you through how to create HTML5 tables to present data and how to create tables that are both semantic and accessible, too. Just getting started with HTML? Go to the start of this HTML for Beginners playlist: ru-vid.com/group/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu

@MasterZhao Год назад

what if you have to do more than one table separate from the others?

@user-jw2qn3rj8y 9 месяцев назад

You made creating tables in HTML5 super easy....tysm

@user-sv8bg6fu9r 5 месяцев назад

You made everything in HTML super easy for me A big thank you to you

@fairytail6896 5 месяцев назад

A very well-explained video. Keep up the good work!

@plaguegames3556 2 года назад

Thank you for the tutorial Dave and my thanks to everyone who contributed to remove them from being used to layout entire pages :D

@DaveGrayTeachesCode 2 года назад

Absolutely! 💯

@Josiah-Sitariko 9 месяцев назад

This has helped me nice explanation. Thanks

@TerefeTumebo 26 дней назад

tnx so much

@fabrice9848 Год назад

I like your videos. Really helpful and clear.

@DaveGrayTeachesCode Год назад

I'm glad to hear that!

@YannMetalhead Месяц назад

Good video!

@dywa_varaprasad 2 года назад

hi Dave nice explanation 👏🏻👏🏻

@DaveGrayTeachesCode 2 года назад

Thank you! 💯

@qrnasr246 Год назад

Great Job !

@DaveGrayTeachesCode Год назад

🙏🙏

@JohnMacPherson-hr4yz 9 месяцев назад

min 10:54 the longer is the last sentence in the table - the longer is the width of the table. How do you make that sentence wrap?

@md.nashirulla5719 Год назад

Very useful course.

@DaveGrayTeachesCode Год назад

Glad it was helpful!

@garikmelqonyan6011 Год назад

Great tutarial

@DaveGrayTeachesCode Год назад

Thank you!

@Valdaur Год назад

I find tables a bit confusing to get my head around sometimes. I find it hard to visualise the table as I am writing the code for it. But I think I understand the whole Col/row span and scope=row/col concept as the columns are side by side and the rows are stacked on top of each other. So when doing rowspan it's going down a row, and colspan is going sideways to the adjacent column. Scope is going either sideways (if a row) and down (if a col). I can understand why this may be confusing at first.

@DaveGrayTeachesCode Год назад

Seems like you've got it! The more you work with tables, the easier they get.

@Valdaur 7 месяцев назад

4:55 For some reason, my table doesn't show as having any margin by default. My code is also the same as yours too.

@avvaiaravind8091 4 месяца назад

Hi! After writing css code in main.css I can't see Table in my website even after saving and one more it asks to put colon near solid #eee Even after putting I can't see table and it shows unknown property. Can anyone help me with this!!!

@ahmad-murery 2 года назад

I'm so old I remember designing website layouts using tables 😎 and I totally forget about the caption tag 20k milestone on the way 💨 Thanks Dave,

@DaveGrayTeachesCode 2 года назад

Me too!😄 Everything used to be tables! I'm glad they still have a purpose, but I am also glad that purpose is not the full site layout. Yes, the road from 10k to 20k has passed quickly. Thank you for joining me on the journey! 🚀

@ahmad-murery 2 года назад

@@DaveGrayTeachesCode I'm glad I did, Thanks for having me on your journey 📈

@plaguegames3556 2 года назад

@@DaveGrayTeachesCode If you keep with this steadiness and pace 100.000k is not far away 🚀

@DaveGrayTeachesCode 2 года назад

@@plaguegames3556 thank you! 💯

@letuslearnmore Год назад

(Ha I'm Dav ) This sentence has become like my name :)

@fabrice9848 Год назад

What's the point of using ?

@DaveGrayTeachesCode Год назад

MDN reveals all: developer.mozilla.org/en-US/docs/Web/HTML/Element/time ..."to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders."

@felicialeann547 Год назад

4:23 I'm new to all of this. I'm watching your videos in order. I rewatched this multiple times.... I think you accidentally left out the part where you show us where the pasted css came from to create the table. You say to open the css file.... then you say to past in the css for the table.... but where did that come from???? From the title of the video I thought the whole point of this video was to show us how to put a table into our html? I'm really confused. Do we just google " How to add CSS table to beginner html index file" ? and then follow whatever we find? and that's the missing part of your video? please help. or is there a paid link to the missing part of your video?

@DaveGrayTeachesCode Год назад

Please note: This video is #8 in an HTML series. The project in this tutorial has been added to in several of the videos. The info you seek is in video #2 about the element: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QRvA8Mp-uME.html ..that said, you can learn how to build an HTML table in this video alone. Building a correct HTML table does not require CSS although CSS may make it look better.

@felicialeann547 Год назад

@@DaveGrayTeachesCode yes, I watched the videos 1-7 and now this one. At 4:23 in this video where you paste into the css file a table that creates lines. Where did the stuff you pasted come from?

@felicialeann547 Год назад

I decided to just pause the video and type each letter and punctuation mark into the main.css file from line 18 through 27 that you pasted so I could move on. And, I googled about the topic a little bit too. hmm... when css references or refers to font families and specific fonts.... do these fonts need to be known fonts floating around online or is there a list of possible fonts to choose from? Could one use a created font? This seems interesting to me. Maybe I'll learn the answer the more I watch your videos lol Also... thank you.