Semantic HTML challenge

\ ゜o゜)ノ

HTML/CSS Table

HTML/CSS Table Challenge

Instructions

clone this repo to your own GitHub or download the images and copy/create an index.html and styles.css on your local machine or a code sharing platform such as codepen.io

Challenge

Make the table above in HTML and style with CSS and embed your solution in a blog post.

1. The table width should fill any container it is put in

2. The noise image is on the table body only not the head or foot

3. The two fonts are Rock Salt and Helvetica Neu

4. Here is that lovely leopard skin image

5. There is a gradient fill on the header and footer - rgba(0,0,0,0.1), rgba(0,0,0,0.5)

6. Here are those delicious colours

   1. #800080 (Border)

   2. #ff33cc (background on rows 1, 3, 5, and 7)

   3. #e495e4 (background on rows 2, 4, 6, and 8)

Tips

• Get control of your table-layout.

• Think about your font stack.

• Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.

• Use table-layout: fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (th).

• Use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look.

• Use thead, tbody, and tfoot to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.

• Use zebra striping to make alternate rows easier to read.

• Use text-align to line up your th and td text, to make things neater and easier to follow.

Resources

Links

W3Schools Table Layout

CSS Tricks Fixed Table Layout

MDN - :nth-child

MDN - caption-side

MDN - border collapse

MDN - Text Shadow

MDN - Linear Gradient

MDN - Web Fonts

Table Data

Caption

A summary of the UK's most famous punk bands