Coding for Beginners: Tables #7— Styling Table Columns with the colgroup and col Elements
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
------
Now, what if you want to add a particular style to a column? We have a way to target a table data cell, a table header cell, and a table row but not a column. To do this we have to introduce some new elements: colgroup and col. The colgroup element groups columns together while the col element identifies a column. With the styling of columns we can adjust the border, background, width, and visibility. For other properties, you would have to target individual td or th elements.
The colgroup element is added right after the table opening tag and will contain the total number of columns in your table by tagging each with a col element, an empty element. So if you add styling to the second col element, you are affecting the second column. Even if you aren’t styling a column, you should include a blank col placeholder so that the correct column has the styling applied. Here, we are adding the same background color to the first two columns and the third column has another background color for emphasis.
#HTML #CSS #coding #web #accessibility #tablecolumns #colgroup #col #styletablecolumns #tables #htmltables #table #codinglife #webdesign #designerslearncode #thedailycodesnippet #dailycodesnippet #codingforbeginners #htmlelements #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse