Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Generating table styles

Hey,

I have this table here: http://www.cl.ly/0O030E3K2m0W2D2d3x07 - I am trying to style, the biggest thing that I am having trouble with are the inset lines, what is the best way to do that via CSS to get that markup as shown in the image.

The other areas are basic CSS.

Thanks,

Ryan
Avatar of TonyReba
TonyReba
Flag of United States of America image

I am not able to see the link
Avatar of catonthecouchproductions

ASKER

Try refreshing the page that.
Well, I would just make sure you nest all your elements correctly. It would be way better if you posted some markup at least.

Anyway, something like:
table, table td, table td tr {
 border: 1px solid #999999;
}

Open in new window

should get your borders set once your tables are all set up.

If you have some markup we could assist more thoroughly.
I am not able to see the page entirely , but I am going to give you a very good link where you can get very cool table along with their style sheets:

http://icant.co.uk/csstablegallery/tables/38.php
Avatar of bastianr
bastianr

I tried to re-create the table from your graphic in CSS. A bit quick and dirty but I think it's similar the comp. To get the inset working, I set a single color for the border on the <table> and two colors on different sides of the <td>/<th> tags to simulate the shading. I then set the border-collapse property like this:

table, th, td {
  border-collapse: separate;
}

Open in new window


You might want to use some fancier selectors or add a special class to the cells in the right-most column to turn off the light-colored border. That would match the graphic closer.

I had never tried rounded corners on a table before but it works fairly well on FF4, Safari5 and Chrome11 on Win XP. Since there are borders in the mix, I added special classes to the cells in the corners so that they would play along with the corners set on the table itself, otherwise they stick out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table exp</title>
<style type="text/css">
body {
	font: 62.5% normal Verdana, sans-serif;
	color: #4a4a4a;
}

table {
	background-color: #f2f2f2;
	border: 1px solid #dbdada;
	border-width: 1px 1px 0 0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

th, td {
	text-align: left;
	border-width: 1px;
	border-style: solid;
	border-color: #fefefe #fefefe #DBDADA #DBDADA;
	margin: 0;
	padding: 6px;
}

table, th, td {
	border-collapse: separate;
}

.ul {
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
}

.ur {
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
}

.lr {
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
}

.ll {
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
}
</style>
</head>

<body>
<table border="0" cellspacing="0">
	<tr>
		<th class="ul" scope="col">&nbsp;</th>
		<th scope="col">FCP 200: Introduction to Final Cut Pro</th>
		<th class="ur" scope="col">Motion 101: Introduction to Motion 4</th>
	</tr>
	<tr>
		<th>program</th>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<th>duration</th>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<th>certification level</th>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<th>built for</th>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<th>cost</th>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<th class="ll">description</th>
		<td>&nbsp;</td>
		<td class="lr">&nbsp;</td>
	</tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of bastianr
bastianr

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial