Can anyone please help? HTML - two tables applying different styles

[coding101]

Hello everyone,

I posted a thread but I guess I wrote it on the archive section..
I am pretty new in this community. I am interested in Web Development. So firstly, I started learning HTML on youtube and other different platforms, 2-3 weeks ago. I am having a trouble and I do hope if I can get a help, that would be much appreciated. I have two tables in a HTML, and all I want is to style them differently. I searched it on the community but I couldn't manage it. When I do it, their unique styles becomes useless..

Here is my attempt, thank you very much in advance.

this is first table's code;

<table class="table1">
<caption >FOOD TABLE</caption>
<tr >
<th >Breakfast</th>
<td>Toast</td>
<td>Scrambled Egg</td>
<td>Cheese</td>
<td>Olive</td>

</tr>
<tr >
<th >Lunch</th>
<td>Soup</td>
<td>Pasta</td>
<td>Hamburger</td>
<td>Fish&Chips</td>

</tr>
<tr >
<th >Snack</th>
<td>Crackers</td>
<td>Chips</td>
<td>Sandwich</td>
<td>Crepe</td>

</tr>
<tr >
<th >Dinner</th>
<td>Steak</td>
<td>Mac N' Cheese</td>
<td>Clam chowder</td>
<td>Pizza</td>


</tr>

</table>

and this is 1st table style code;
table.table1,th,td,tr{border: 3px groove red; text-align: center; font-style: italic;font-family: Arial; font-size: 15px; color: teal; font-weight: bold;}

this is 2nd table

<table class="table2" cellspacing=5; cellpadding=10>
<caption>CAR TABLE</caption>

<tr>
<th >Brand</th>
<th >Type</th>
<th >Color</th>
<th >Nationality</th>

</tr>
<tr class="names">
<td>Ford</td>
<td>Mustang</td>
<td>Red</td>
<td>American</td>
</tr>
<tr class="V">
<td id="VW">Volkswagen</td>
<td>Touareg</td>
<td>Navy Blue</td>
<td>German</td>
</tr>
<tr class="A">
<td>Audi</td>
<td>Q5</td>
<td>Monsoon Gray</td>
<td>German</td>
</tr>

<tr class="F">
<td>Ferrari</td>
<td>F8 Tributo</td>
<td>Red</td>
<td>Italian</td>
</tr>

</table>

and this is 2dn table's style code;


table.table2,tr,td,th{border: 3px solid darkcyan; width:10%;height:10px; text-align: center;}
table.table2{margin-top: 5%;margin-left: 5%; }
table.table2 th{background-color: darksalmon;color:mediumvioletred;}
table.table2.names{background-color: #708090;color: tomato;font-weight: bold;font-size: 20px;}
table.table2.table.V{background-color: thistle; color:slateblue;font-size: 20px; font-weight: bolder;}
table.table2 #VW{background-color:black;}
table.table2.A{background-color: burlywood; color:green;font-size: 20px; font-weight: bolder;}
table.table2.F{background-color:hotpink; color:navy;font-size: 20px; font-weight: bolder}
table.table2 caption{font-size: 25px; color: seagreen;font-weight: bold;}
table.table2brand:hover{background-color: mintcream;}

 

[BigDady]

What is your question? Where is your problem?
I do see one.
If you just do the first table and look at the browser output and then add the second table with it's CSS and refresh the browser - The first table changes. Here's why:
The first CSS has
table.table1,th,td,tr{...} The TH, TD, and TR elements are universal and not specific to the TABLE with CLASS table1!!!
When we introduce the second table it changes the TH, TD, and TR elements.
You need to refer to the TH - TD - TR of the tables by their classes. So the line should be:
table.table1, .table1 th, .table1 td, .table1 tr{...}

".table1 th" refers to the header cells of TABLE class table1 and does not interfere with the header cells of TABLE class table2; which are known as ".table2 th".

What other problems are you having?

 

[coding101]

What is your question? Where is your problem?
I do see one.
If you just do the first table and look at the browser output and then add the second table with it's CSS and refresh the browser - The first table changes. Here's why:
The first CSS has
table.table1,th,td,tr{...} The TH, TD, and TR elements are universal and not specific to the TABLE with CLASS table1!!!
When we introduce the second table it changes the TH, TD, and TR elements.
You need to refer to the TH - TD - TR of the tables by their classes. So the line should be:
table.table1, .table1 th, .table1 td, .table1 tr{...}

".table1 th" refers to the header cells of TABLE class table1 and does not interfere with the header cells of TABLE class table2; which are known as ".table2 th".

What other problems are you having?

Thank you for your reply. I am studying tables right now, and I am trying to create a table like this (you can see as an attachment) And here's my code. I want my table to look like the 1st picture, but it looks like 2nd one.


<table>
<tr>
<th rowspan="4">Numbers</th>


</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>


</tr>


</table>

 

[BigDady]

Two sites you should know about.
https://www.w3schools.com/ easy way to learn. Chapters to go to the stage you want to learn. - It's not the end all. be all, but it's a great help.
AND
https://developer.mozilla.org/en-US/docs/Web/HTML
Just snoop around the site. More info than you need.

You need to study colspan and rowspan.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site</title>
<style>
table, th, td {
  border: .5vw solid red;
  border-collapse: collapse;
}
td{
    width: 20vw;
    text-align: center;
}
</style>
</head>
<body>
<table>
    <tr><td rowspan=5 style="max-width: 8vw;">Numbers</td><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>
</table>

</body>
</html>

You study - understand this and you can do the second one.

 

[coding101]

Two sites you should know about.
https://www.w3schools.com/ easy way to learn. Chapters to go to the stage you want to learn. - It's not the end all. be all, but it's a great help.
AND
https://developer.mozilla.org/en-US/docs/Web/HTML
Just snoop around the site. More info than you need.

You need to study colspan and rowspan.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site</title>
<style>
table, th, td {
  border: .5vw solid red;
  border-collapse: collapse;
}
td{
    width: 20vw;
    text-align: center;
}
</style>
</head>
<body>
<table>
    <tr><td rowspan=5 style="max-width: 8vw;">Numbers</td><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>
</table>

</body>
</html>

You study - understand this and you can do the second one.

Thank you so much for your help. I'll study!