Table Basics

Let's create a simple nice table with striped rows and different controls inside.

The goal

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).
Preliminary material

Please refer to the very first project in this series that explains in detail how to create and work on a project: 

Before you start, get familiar with the basics of HTML and CSS (if you never tried them). We found these resources pretty clear:

You also may want to refresh your memory about some common principles of HTML and CSS:

This is also a good short introduction to HTML: 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: 

  1. 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
  2. Create a simple table as described in the materials above. Experiment with rows and columns.
  3. Add different controls to the cells: images, links, dropdown lists, text. 
  4. 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.
  5. Play with styles of other controls (see our screenshots for the ideas).
  6. Improve the table's look: it should take the whole width and the page should have scrolling if needed. 
  7. 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.
  8. Add the style for a striped table (it may be done with just one CSS rule - which?)
  9. Check the page on different devices: the page should have a scroll when the table is bigger than it.


Additional ideas

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.

Acceptance criteria
  1. The table should be visible on devices of any size (if it's bigger than a page, the scrolling should be available).
  2. The whole page and the table should use a custom font (not the default one).
  3. 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.
  4. The table should have a nice style and it should have stripes provided by just CSS.
No posts yet! Share your experience with this project, help others, ask and answer questions, get feedback