Question

Open the code6-1_table.css file and create the

following style rules for the indicated elements:
1. For the table element: Add a 20 pixel
grooved gray border and collapse the
table borders.
2. For the th and td elements: Add a 1
pixel solid gray border, set the padding
space to 5 pixels, and align the cell
content with the top-left corner of the
cell.
3. For the caption element, set the
display the caption at the top-left of
the table and set the font size of the
caption text to 1.5em.
4. For col element with the id
first Col, change the background
color to yellow and set the column
width to 150 pixels.
5. For col element with the id
hourCols, set the column width to
75 pixels.
6. Change the background color of the
thead element to aqua.

Answer 1

Here are the style rules for the indicated elements:

```css

/* 1. For the table element */

table {

border: 20px groove gray;

border-collapse: collapse;

}

/* 2. For the th and td elements */

th, td {

border: 1px solid gray;

padding: 5px;

vertical-align: top;

text-align: left;

}

/* 3. For the caption element */

caption {

caption-side: top;

font-size: 1.5em;

}

/* 4. For col element with the id firstCol */

col#firstCol {

background-color: yellow;

width: 150px;

}

/* 5. For col element with the id hourCols */

col#hourCols {

width: 75px;

}

/* 6. Change the background color of the thead element */

thead {

background-color: aqua;

}

```

These style rules can be added to the code6-1_table.css file to apply the styling to the corresponding elements in the HTML code.