Solved

CSS table

Posted on 2010-11-29
9
314 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
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
Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Input box gone wrong 8 24
Html5 Index on a table 7 26
Location of Buttons 4 15
asp.net input html code have it display the content 2 11
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

770 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