Solved

How to change the border colour of different tables?

Posted on 2014-04-23
11
210 Views
Last Modified: 2014-04-24
Hi - I am trying to change the border colour of one of the tables below, but I get the same colour blue for both instead of green?

Thanks
<!DOCTYPE html>
<html>

<head>
<style>
.table1,tr, td
{
border:1px solid green;
border-collapse:collapse;
}

.table2,tr,td
{
border:1px solid blue;
border-collapse:collapse;
}
</style>
</head>

<body>
<table class="table1" style="width:100%">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
<br />
<table class="table2" style="width:100%">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:shiva108
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40017123
Because you have commas in your style elements.

To style a td in a particular table you should do the following

table.table2 tr td

Says style the child td's of the child tr's of all tables with class table2

In other words
.table1 tr td
{
  border:1px solid green;
  border-collapse:collapse;
}

.table2 tr td
{
  border:1px solid blue;
  border-collapse:collapse;
}

Open in new window

0
 
LVL 25

Expert Comment

by:Zephyr ICT
ID: 40017133
An alternative:

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
table tr td
{
border:1px solid;
border-collapse:collapse;
}
</style>
</head>

<body>
<table class="table" style="width:100%; color: green">
<tr>
  <td>Jill</td>
  <td>Smith</td>            
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>            
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>            
  <td>80</td>
</tr>
</table>
<br />
<table class="table" style="width:100%; color: blue">
<tr>
  <td>Jill</td>
  <td>Smith</td>            
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>            
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>            
  <td>80</td>
</tr>
</table>



</body>

</html> 

Open in new window

0
 

Author Comment

by:shiva108
ID: 40017136
Thanks Julian, that works but how do I control the white space between each td?
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

by:shiva108
ID: 40017141
Thanks how do I control the space between each td?
0
 
LVL 15

Expert Comment

by:Edwin Hoffer
ID: 40017142
Dear shiva108,

As per your code, the tr and td styles are getting confused as you are defining them twice. The .table1,tr,td means that class table1 and all the available table rows "tr" and table definitions "td" would inherit similar style property. In your code you mentioned them twice that’s why there is irregularity in the styling.

The Solution for your problem is that if you want the table borders styling i.e. color and border to be similar then write the code like this ".table1>tr>td" and if you want the color of table border, table row border to be different then you need to mention their styling separately like:

tr,td {border: 1px solid green;}

If you didn't understand any part or need further assistance, feel free to contact.

Thanks
Edwin J Hoffer
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40017146
The white space is controled with the following styles

padding
border-collapse

To get rid of the cell spacing

table {
   border-collapse: collapse;
}

Open in new window

To set cell padding

table td {
   padding: 5px;
}

Open in new window

0
 
LVL 25

Expert Comment

by:Zephyr ICT
ID: 40017162
Or as in the alternative:

<table class="table" style="border-collapse: collapse; width:100%; color: green">

Open in new window


...
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40017169
Personally I am not a fan of in element styling unless there is a specific reason for it.

The purpose of stylesheets is to separate the styling from the content.

My recommendation would be to not use the in-element styling if you can possibly avoid it.
0
 

Author Comment

by:shiva108
ID: 40017362
Hi Julian I have tried border collapse, but that does not work for the margins between each cell. See attached image and code

<!DOCTYPE html>
<html>

<head>
<style>
.table1 tr td
{
border:1px solid green;
border-collapse:collapse;
}

.table2 tr td
{
border:1px solid blue;
border-collapse:collapse;
}
</style>
</head>

<body>
<table class="table1" style="width:100%">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
<br />
<table class="table2" style="width:100%">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:shiva108
ID: 40017365
Thanks edwin it is a different approach - can you give an example cheers
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 300 total points
ID: 40017722
You need to add the border-collapse to the table not the cell.
<!DOCTYPE html>
<html>

<head>
<style>
table {
	border-collapse:collapse;
}
.table1 tr td
{
	border:1px solid green;
}

.table2 tr td
{
	border:1px solid blue;
}
</style>
</head>

<body>
<table class="table1" style="width:100%">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
<br />
<table class="table2" style="width:100%">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
</body>
</html>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question