CSS table creation

**auriaks** · 03-29-2010, 08:45 PM

Hi,

Maybe someone (more experienced) would help me to create this table I attached??

Thanks in advance...

**Nile** · 03-29-2010, 09:23 PM

Something as simple as:

Doesn't even require tables. If the above is what you want - with your confirmation, I will make it for you.

**auriaks** · 03-29-2010, 09:33 PM

Yea... That is the best I expect

You gonna create this without div's?

**Nile** · 03-29-2010, 09:35 PM

No, I'm going to use divs. Not tables. Well - I may use a table for the bottom part but not the images. It should be done in about 10 minutes.

**auriaks** · 03-29-2010, 09:38 PM

it would be perfect...

Tip: can you make it without the "Sed" vertical line?

**Nile** · 03-29-2010, 09:43 PM

You can change it however you like.

HTML Code:

<style type="text/css">
	.container {
		background: #E9E9E9;
		border: 1px solid #DCDCDC;
		padding: 5px;
		font-family: georgia;
		font-size: 12px;
		color: #000;
		width: 860px;
	}
	.container .left {
		float: left;
		width: 55%;
		margin: 0;
		padding: 0;
	}
	.container p {
		margin: 0;
		padding: 0;
	}
	.container .left p.sentence {
		font-weight: bold;
		padding-bottom: 5px;
	}
	.container .left p img {
		padding: 2px 0 0 0;
	}
	.container .left table {
		font-size: 12px;
		font-weight: bold;
		padding-top: 15px;
		float: left;
	}
	.container .left table td {
		padding-right: 13px;
	}
	.container .right {
		float: right;
	}
	.container .clear {
		clear: both;
	}
</style>
<div class="container">
	<div class="left">
		<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<table>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
		</table>
		<p class="images">
			<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
			<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
		</p>
	</div>
	<div class="right">
		<img src="http://localhostr.com/files/46edf9/sky.png" alt="Sky" title="Sky" />
	</div>
	<div class="clear" />
</div>

Example:
http://unlinkthis.net/examples/display-tabletodiv.html

**auriaks** · 03-29-2010, 09:57 PM

Made my day

can I write <style> script not in the <head> directory?

**Nile** · 03-29-2010, 10:00 PM

You can - but I wouldn't. Put this part of the code in the <head> part of the document:

Code:

<style type="text/css">
	.container {
		background: #E9E9E9;
		border: 1px solid #DCDCDC;
		padding: 5px;
		font-family: georgia;
		font-size: 12px;
		color: #000;
		width: 860px;
	}
	.container .left {
		float: left;
		width: 55%;
		margin: 0;
		padding: 0;
	}
	.container p {
		margin: 0;
		padding: 0;
	}
	.container .left p.sentence {
		font-weight: bold;
		padding-bottom: 5px;
	}
	.container .left p img {
		padding: 2px 0 0 0;
	}
	.container .left table {
		font-size: 12px;
		font-weight: bold;
		padding-top: 15px;
		float: left;
	}
	.container .left table td {
		padding-right: 13px;
	}
	.container .right {
		float: right;
	}
	.container .clear {
		clear: both;
	}
</style>

And then this:

Code:

<div class="container">
	<div class="left">
		<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<table>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
			<tr><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td><td>Bloo</td><td>Blob</td><td>Blar</td></tr>
		</table>
		<p class="images">
			<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
			<img src="http://localhostr.com/files/0140c7/nature.png" alt="Nature" title="Nature" />
		</p>
	</div>
	<div class="right">
		<img src="http://localhostr.com/files/46edf9/sky.png" alt="Sky" title="Sky" />
	</div>
	<div class="clear" />
</div>

Where you need it

Thread: CSS table creation

Thread Tools

Search Thread

CSS table creation

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions