CSS: Basic table layout

Complete a website layout with the following UI:

Application Demo:

The layout contains the following components:

• A table with exactly 3 columns and 5 rows (excluding the header).

Style all components as follows and position all components as per the UI provided:

Table Layout:

• There should be a 50px margin surrounding the table.

Header Row:

• The header should have a dark background color (#333).
• The text color should be green (#1ba94c).
• The text size should be 16px.
• The header text should be bold.

Table Rows:

• Odd-numbered rows should have a background color of #ffffff (white).
• Even-numbered rows should have a background color of #f7f7f7 (light gray).
• The font size of the text should be 14px.
• The text color should be black (#000).

Table Cells:

• Each cell should have a thin border with a thickness of 1px, styled as a solid line, and use a light gray color (#ddd).
• All cell text should be left-aligned.

The goal is to match the UI with the design shown in the demo.

The markup for the question is provided. Complete the src/css/style.css file to implement the required features.

Read-only files

• test/*
• src/index.js
• src/index.html
• app.js

Read Only Files

• test/*
• src/index.js
• src/index.html
• app.js

Commands

• run:

npm start

• install:

npm install

• test:

npm test

Environment

• Node Version: ^18.15.0
• Default Port: 8000