Solved

How to change the border colour of different tables?

Posted on 2014-04-23
11
201 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 51

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
 

Author Comment

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

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 51

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 51

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 51

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now