Advanced CSS Exercise

As an extension of your first homework assignment, make the following table and include the information listed in it.

• The first row should have a sketch of you in the first cell, a nested table with your name and birthday in the second cell (3 rows, 2 columns, and no border - as shown), and working links to your favorite websites in the third cell. The second row should have a working player displaying your favorite youtube video in the first cell (this cell has to span 2 rows and 2 columns) and a recipe for your favorite food with an overflow attribute in the second cell. The cell in the third row shouldn't have anything in it, but you should separately design a "text table" using the <pre> tag, and list the indicated information about your classes. This "text table" should be positioned roughly where the bottom right cell of your main table is, as shown (using the position property in CSS).
• Include a caption for your main table and put it at the bottom of the table.
• All your table data cells should have a padding of 5 pixels, your headings should be centered in the table cells, and your list should have square bullets.
• Use a <sup> tag for your birth date (for example, February 29^th to make February 29^th).
• Give your nested table and "text table" the background color #ffc and a dashed, 2-pixel-wide border and a 10-pixel padding.
• Give your nested table and the caption of the main table the Arial font.
• Give your main table the background color #dda and center it on the page (with margin:auto).
• Give your main table a width of 700 pixels, the first cell should be 25% of the total width of the table, and the second cell should be 35% of the total width of the table. The youtube player should have a width of 400 pixels and a height of 225 pixels.

Your final table and its components should look very similar to the example shown below.