Solved

How to change the border colour of different tables?

Posted on 2014-04-23
11
205 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 54

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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

Author Comment

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

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 54

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 54

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 54

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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

809 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