Exercise $12-1$ Add a table to the luncheons page In this exercise, you'll enhance the luncheons page by adding a table to it so it looks like the one that follows. Enter the table into the luncheons.html file Use your text editor to open the luncheons.html page in the town$\_$hall$\_3$ folder. Then, run the page to see that everything but the table is already in the file. Add the table shown above to the page. To start the table, you may want to copy the HTML for one of the tables in the book examples into the file. Then, you can modify that code and add the data for the new table. To quickly add new rows to the table, you can copy and paste earlier rows. Test the page to make sure the contents are all there, even though the table won't be formatted right.Add the cSs for the table to the main.css file Use your text editor to open the c$12$ main.ess file in the styles folder. To start the code for the table, copy the CSS for one of the tables in the book examples into the file. Then, test to see how the table looks. Modify the CSS so the table looks like the one above. Here, all of the borders and the text in the heading above the table should have $$800000$ as their color. To do some of the alignment and to add borders to some of the rows, you should use classes. Test and adjust until the table looks the way you want it to$.$ Treat the table as a figure, provide for accessibility. and experiment Enclose the table within a figure element, and code a figcaption element above the table, but within the figure element. Then, copy the h$2$ element that says: "The luncheon schedule" into the figcaption element. Test this change. The page should look the same as it did in step $6,$ except the table will now be centered. Using figure $12-8$ as a guide, add the attributes for user accessibility. Experiment with the CSS structural pseudo$-$classes to see whether you can replace some of your class selectors with pseudo$-$class selectors.$`$

Add the CSS for the table to the main.css file

Use your text editor to open the cl$2\_$main.css file in the styles folder. To

start the code for the table, copy the CSS for one of the tables in the book

examples into the file. Then, test to see how the table looks.

Modify the CSS so the table looks like the one above. Here, all of the

borders and the text in the heading above the table should have #$800000$ as

their color. To do some of the alignment and to add borders to some of the

rows, you should use classes.

Test and adjust until the table looks the way you want it to$.$

Treat the table as a figure, provide for accessibility,

and experiment

Enclose the table within a figure element, and code a figcaption element

above the table, but within the figure element. Then, copy the h$2$ element

that says: "The luncheon schedule" into the figcaption element.

Test this change. The page should look the same as it did in step $6,$ except

the table will now be centered.

Using figure $12-8$ as a guide, add the attributes for user accessibility.

Experiment with the CSS structural pseudo$-$classes to see whether you can

replace some of your class selectors with pseudo$-$class selectors.