Coding for Beginners: Tables #3— Adding a Header Row to Your HTML Table
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
Our example still doesn't really look like a table.
cell data 1 cell data 2 cell data 3
cell data 4 cell data 5 cell data 6
Why is this?
Typically, with a table you are trying to relate one data element to another. Tables have a special row that helps identify the information that will be found in the same column. This row of special cells are called a header. And the initial cell in each row will identify the information to be found in that row.
Let's say we are working in a veterinarian's office and the table is listing patient demographics.
So in the first column we may have an identifier for each pet. Subsequently, we will have a column for the type of animal, age, and breed.
Identifier Type Age (yrs) Breed
Pet #1 Dog 5 German Shepherd
Pet #2 Cat 12 Bengal
Pet #3 Dog 2 Havanese
To create a header row, we use the table header or th element
Table header cells have a default styling associated with them. They will appear bold and centered. This helps them to stand out.
See the full video to review the code to add a table header element
#HTML #CSS #coding #web #accessibility #tables #htmltables #table #tableheader #tablerow #tabledata #handlingdata #datahandling #codinglife #webdesign #designerslearncode #thedailycodesnippet #dailycodesnippet #codingforbeginners #htmlelements #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse