Solved

CSS table

Posted on 2010-11-29
9
330 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

623 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