Solved

CSS table

Posted on 2010-11-29
9
328 Views
Last Modified: 2012-06-27
Hi,

I was running following example
<html>
<head>
<style type="text/css">
table,th,td
{
border:10px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

Open in new window


I have not understood the output. how td, tr, table borders are different. When i say 10 px here which is actually getting effected, since all these borders are interlinked. any ideas, links, resources,sample cde highly appreciated. thanks in advance.
0
Comment
Question by:gudii9
[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
  • 3
  • 2
  • 2
  • +1
9 Comments
 
LVL 2

Assisted Solution

by:getnitincr
getnitincr earned 100 total points
ID: 34236440
go through
http://veerle-v2.duoh.com/blog/comments/a_css_styled_table/
surly will help you understand .
0
 
LVL 2

Expert Comment

by:getnitincr
ID: 34236444
0
 
LVL 7

Author Comment

by:gudii9
ID: 34240396
these link examples are too complex for me. I have not really got any answer there to my question.please advise
0
Industry Leaders: 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!

 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 300 total points
ID: 34245249
A table is a BALANCED GRID OF DATA CELLS.

If text in one cell is very long, ALL the other cells will be the same length, even if only little data, that is the only way a table can work, because all the borders between the cells must line up.

So if you set in CSS the borders --

TABLE  (  border 1px solid black }  - every line around the table, TD and TH will be one px wide, solid.

Does that help?
0
 
LVL 8

Assisted Solution

by:Zado
Zado earned 100 total points
ID: 34249877
Read this to understand it better:
http://www.w3schools.com/html/html_tables.asp ,and then this:
http://www.w3.org/TR/html401/struct/tables.html

Always try to search w3schools.com to get info about html/css (and more), it's great portal for beginners
To get very detailed information, go to w3.org, you will find there absolutely everything about html/css.
0
 
LVL 8

Expert Comment

by:Zado
ID: 34317454
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
ID: 34384860
To be clear here: I'm not asking for grant the points to me, but generally.
If you have a problem with any suggestion from experts or nothing works with your expectation, please let us know, so we will continue work on solution for you, thanks.
0
 
LVL 7

Author Comment

by:gudii9
ID: 34461903
>>>>TABLE  (  border 1px solid black }  - every line around the table, TD and TH will be one px wide, solid.


can i specify table, td, th all boarders in one stroke
table,th,td
{
border:10px solid black;
}

Will it not effect the table, alignment. Please advise
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 300 total points
ID: 34462245
"can i specify table, td, th all boarders in one stroke
table,th,td
{
border:10px solid black;
}"

YES, you can do exactly that, specify all TABLE, TD and TH elements together, but you should include TR as well so that all lines have the same thickness.  When all table borders are set the same, the table alignment will not be offset by one vertical or horizontal line being different than the others.

You should use --

TABLE, TR, TH, TD { border: 1 px solid black; }  

however, as 10 px is much too wide, unless a lighter color.
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

Suggested Solutions

Title # Comments Views Activity
CSS for Popup in ASP.NET 4 49
Incorrect css styling in footer 3 24
Disabling a Faux Submit Button 4 41
CSS Selector Chain NOT working for this situation? 3 16
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

752 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