Solved

How to change the border colour of different tables?

Posted on 2014-04-23
11
202 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 52

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 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 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

21 Experts available now in Live!

Get 1:1 Help Now