?
Solved

How to change the border colour of different tables?

Posted on 2014-04-23
11
Medium Priority
?
215 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
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 61

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 61

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 61

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 61

Accepted Solution

by:
Julian Hansen earned 1200 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

621 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