You will know how to use tables; apply the styles to them; add them with the content of different types.
What you will learn
- Using tables
- applying CSS styles to the table element
- adding content into tables (text, images, other controls)
- working with table's header and body
- changing styling of standard elements (like dropdowns and links).
Please refer to the very first project in this series that explains in detail how to create and work on a project: https://www.codingwolves.io/project/a179f0e9/simple-personal-page
Before you start, get familiar with the basics of HTML and CSS (if you never tried them). We found these resources pretty clear:
- Table Basics By Mozilla https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
You also may want to refresh your memory about some common principles of HTML and CSS:
- Elements https://www.tutorialspoint.com/html/html_elements.htm
- Attributes https://www.tutorialspoint.com/html/html_attributes.htm
- Images https://www.tutorialspoint.com/html/html_images.htm
- Styles Sheets: https://www.tutorialspoint.com/html/html_style_sheet.htm
- Media queries https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries (to make the page responsive)
This is also a good short introduction to HTML: https://www.geeksforgeeks.org/html-introduction/
For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css
- Create the project folder, add files, and include all links. The most detailed instructions on how to start any project can be found in Step 1 of the first project.
- Create a simple table as described in the materials above. Experiment with rows and columns.
- Add different controls to the cells: images, links, dropdown lists, text.
- Make sure you use images of different sizes and provide nice sizing of images inside the cells no matter which size an image is. You also can center images.
- Play with styles of other controls (see our screenshots for the ideas).
- Improve the table's look: it should take the whole width and the page should have scrolling if needed.
- Provide a nice style for the table: thin border, padding, alignment. You can achieve it using styles for whole rows, or assigning classes to specific cells.
- Add the style for a striped table (it may be done with just one CSS rule - which?)
- Check the page on different devices: the page should have a scroll when the table is bigger than it.
Play with different styles, you may create a very funny look, or opposite, business or minimalistic. We also suggest to think of the table as a project that could be included in your portfolio.
- The table should be visible on devices of any size (if it's bigger than a page, the scrolling should be available).
- The whole page and the table should use a custom font (not the default one).
- The content of the table should include at least 5 different controls of your choice, for example, a checkbox, link, plain text, button, and a dropdown.
- The table should have a nice style and it should have stripes provided by just CSS.