Solved

CSS table

Posted on 2010-11-29
9
294 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
  • 3
  • 2
  • 2
  • +1
9 Comments
 
LVL 2

Assisted Solution

by:getnitincr
getnitincr earned 100 total points
Comment Utility
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
Comment Utility
0
 
LVL 7

Author Comment

by:gudii9
Comment Utility
these link examples are too complex for me. I have not really got any answer there to my question.please advise
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 300 total points
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 8

Assisted Solution

by:Zado
Zado earned 100 total points
Comment Utility
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
Comment Utility
Please grant the points and close the question, thanks :-)
0
 
LVL 8

Expert Comment

by:Zado
Comment Utility
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
Comment Utility
>>>>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
Comment Utility
"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

What Is Threat Intelligence?

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

Join & Write a Comment

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…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

771 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

12 Experts available now in Live!

Get 1:1 Help Now