Question

Can you please assist me with this HTML?

Below is what I have but it isn't working.

Filename: jpf_sudoku.css

/* Table Styles */

table.spuzzle {
border-collapse: collapse;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 90%;
}

table.spuzzle td {
border: 5px outset gray;
width: 33.3%;
}

table.spuzzle th {
font color: gray;
padding-right: 10px;
padding-bottom: 10px;
}

/* Inner Table Styles */

table.subTable {
border-collapse: collapse;
width: 100%;
}

table.subTable td {
box-shadow: 0px 0px 15px inset;
border: 1px solid black;
color: blue;
height: 40px;
text-align: center;
vertical-align: middle;
}

td.goldBox {
background-color: rgb(228, 199, 42);
}

td.greenBox {
background-color: rgb(203, 229, 130);
}

Outer Table Layout

Open the jpf_sudoku.css file. Start by creating styles for the outer table. Go to the Table Styles section and create a style rule for the table element of the spuzzle class that:

• sets the table borders to collapse,
• sets the top/bottom margins to 0 pixels and the left/right margins to auto , and
• sets the width to 90%.

Outer Table Elements

For every td element, create a style rule that:

• adds a 5-pixel outset gray border and
• sets the width to 33.3%

For every th element, create a style rule that:

• sets the font color to gray and
• sets the right and bottom padding space to 10 pixels.

Inner Table Layout

Next, you create styles for the inner table that is placed within each cell of the outer table. Go to the Inner Table Styles section and create a style rule for the table element of the subTable class that:

• sets the table borders to collapse and
• sets the width to 100%

Inner Table Elements

For every td element within the subTable table, create a style rule that:

• adds an inset box shadow with offset values of 0 pixels in the horizontal and vertical directions with a blur of 15 pixels,
• adds a 1-pixel solid black border,
• displays the text in a blue font,
• sets the cell height to 40 pixels, and
• centers the cell text in the horizontal and vertical directions.

For every td element that is nested within a td element of the goldBox class, create a style rule that sets the background color to rgb(228, 199, 42).

For every td element that is nested within a td element of the greenBox class, create a style rule that sets the background color to rgb(203, 229, 130).

Answer 1

Try this code, hope this works for you.

jpf_sudoku.css:

/* Table Styles */

table.spuzzle {
border-collapse: collapse;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 90%;
}

table.spuzzle td {
border: 5px outset gray;
width: 33.3%;
}

table.spuzzle th {
font-color: gray;
padding-right: 10px;
padding-bottom: 10px;
}

/* Inner Table Styles */

table.subTable {
border-collapse: collapse;
width: 100%;
}

table.subTable td {
box-shadow: 0px 0px 15px inset;
border: 1px solid black;
color: blue;
height: 40px;
text-align: center;
vertical-align: middle;
}

td.goldBox td {
background-color: rgb(228, 199, 42);
}

td.greenBox td {
background-color: rgb(203, 229, 130);
}