RWDHTMLCSS.COM

CSS for our Table

The Table from last page with styling

The CSS we applied to the table

<style>

table {
margin:10px auto;
border-collapse:collapse;
background-color:#ebf6f9;
max-width:90%;
box-sizing:border-box;
}
caption {
font-weight:bold;
font-size:1.5rem;
}
tr:nth-child(even) {
background-color:white;
}
th {
border:solid 1px black;
width:60px;
height:60px;
font-family:times new roman, georgia, garamond;
text-align:center;
font-size:.9rem;
box-sizing:border-box;
}
td {
border:solid 1px black;
width:60px;
height:60px;
font-size:1.3rem;
font-weight:bold;
font-family:times new roman, georgia, garamond;
box-sizing:border-box;
text-align:center;
}
td:hover {
background-color:purple;
color:white;
}
@media screen and (max-width: 380px) {
th {
width:40px;
height:40px;
font-size:.75rem;
}
td {
width:40px;
height:40px;
font-size:.9rem;
}
}

</style>

The CSS Explained

• For the Table selector , we added 10 pixels of margins on the top and bottom. Then auto for the right and left which will center the table. Then we added border-collapse:collapse; . When we add borders, they will be double lined. This will collapse them into one line. We added a background-color:#ebf6f9; for the background of the table. That is the hexadecimal code for a real light blue. Then we added max-width:90%; to the styling so the table does not expand past 90% of the screen. I added box-sizing:border-box; to any place I used margins, borders or padding.
• The caption selector has been styled to have font-weight:bold; and font-size:1.5rem; . That is the line on top of the calender that says March 2023.
  
• The next selector is tr:nth-child(even) . This is going to make every other row background-color:white; . Rows 2, 4 and 6 will be white. If you put odd instead of even, rows 1, 3 and 5 would be white.
• Next is the th selector. This is the heading cells which is the cells in the top row with the days of the week in them. I added a border around the th cells. I also made a width and height of 60 pixels. I added which fonts to use and what size fonts to use. I also used text-align:center to center the text in the cell.
• For the td selector, much is the same as the th selector except I added font-weight:bold; because the th cells have bold text by default and the td cells have normal text by default.
• The td:hover selector makes the td cells do what is in styling when the mouse is hovering over a td cell. I added background-color:purple; and color:white; to the styling. The cell will turn purple with white text while hovering over it. Hovering does not always work correctly on mobile devices.
• Finally I added @media screen and (max-width: 380px) . After playing with it decided to add it in to change a few things when the screen width is 380 pixels or less. All the styling has to be in between the two curly braces of the @media screen and (max-width: 380px) . I changed the width, height and font-size to a smaller one for anything with a screen size under 380 pixels.
• This was all for a demonstration on making tables for your page. I hope it helps.