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


Joined
Dec 1, 2020
Messages
3
Reaction score
0
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;}
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
26
Reaction score
4
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?
 
Joined
Dec 1, 2020
Messages
3
Reaction score
0
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>
 

Attachments

  • NUMBERS.PNG
    NUMBERS.PNG
    4.2 KB · Views: 14
  • numberss.PNG
    numberss.PNG
    2.4 KB · Views: 14
Joined
Nov 13, 2020
Messages
26
Reaction score
4
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.

Code:
<!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.
 
Ad

Advertisements

Joined
Dec 1, 2020
Messages
3
Reaction score
0
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.

Code:
<!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!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top