Forum Moderators: not2easy
<table align="center" width="400" padding="0">
<tr> <!-- Top Row -->
<td width="200px" border="0" style="border: 1px solid black;"> <!--Left Cell -->
Image or Text here
</td>
<td width="200px" border="0" style="border: 1px solid black;"> <!--Right Cell -->
<table width="100%">
<tr>
<td width="50%" bgcolor="404040">Heading 1</td>
<td width="50%" bgcolor="404040">Info 1</td>
</tr>
<tr>
<td width="50%" bgcolor="202020">Heading 2</td>
<td width="50%" bgcolor="202020">Info 2</td>
</tr>
</table>
</td>
</tr>
<tr> <!-- Bottom Row -->
<td width="200px" border="0" style="border: 1px solid Red;"> <!--Left Cell -->
Information List
</td>
<td width="200px" border="0" style="border: 1px solid black;"> <!--Right Cell -->
<table width="100%"> <!-- Lower Right Cell content table-->
<tr style="border: 1px solid black;">
<td width="50%" bgcolor="404040">Heading 1a</td>
<td width="50%" bgcolor="404040">Info 1a</td>
</tr>
<tr>
<td width="50%" bgcolor="202020">Heading 2a</td>
<td width="50%" bgcolor="202020">Info 2a</td>
</tr>
</table>
</td>
</tr>
</table>
I have tried in CSS but the rows do not align properly. What throws me is how to do the table inside a table like "Heading 1" "Info 1" etc.
<div id="left_column">
Image or Text here
</div>
<div id="right_column">
<h1>Heading 1</h1>
<h2>Info 1</h2>
<hr />
<h1>Heading 2</h1>
<h2>Info 2</h2>
</hr />
</div>
<hr />
<div id="left_bottom">
Information List
</div>
<div id="right_bottom">
<h1>Heading 1a</h1>
<h2>Info 1a</h2>
<hr />
<h1>Heading 2a</h1>
<h2>Info 2a</h2>
</hr />
</div>
<hr />
</div>
CSS:
#wrapper {
width:400px;}
#left_column, #right_column
#left_bottom, #right_bottom {
width:200px;
border:solid 1px #000;}
#left_column, left_bottom {
float:left;}
#right_column, #right_bottom {
float:right;}
hr {
clear:both;
display:block;
visbility:hidden;}
h1, h2 {
width:100px;}
h1 {
float:left;}
h2 {
float:right;}
That might work - I haven't tested it out, but it's an awful lot of floats. You might have to mess with margins and paddings, but I think the basics are there for you.
I'll put it out there - is this table actually for tabular data? If so, leave it in a table - that's what tables are for. As long as you're using them for tabular sata -not layouts, it's not wrong to use them in a CSS-based website.
Like I said, that's what they're for! :)
HTML Tag
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>2 x 2 CSS</title>
<link rel="stylesheet" type="text/css" href="images/2x2WebmasterWorld.css">
</head><body>
<div class='full'>
<div class='a1'>Image or Text Here</div>
<div class='a2'>
<div class='head'>Heading 1</div>
<div class='head'>Info 1</div><div class='head'>Heading 2</div>
<div class='head'>Info 2</div></div>
<hr />
<div class='a3'>Image or Text Here</div>
<div class='a2'>
<div class='head'>Heading 1</div>
<div class='head'>Info 1</div><div class='head'>Heading 2</div>
<div class='head'>Info 2</div>
</div></div>
</body>
</html>
CSS Tag
.full {
width : 405px;
text-align : center;
margin-left : auto;
margin-right : auto;
padding : 0px;
height : 250px;}
.a1 {
width: 200px;
border-width : 1px;
border-color : Black;
border-style : solid;
float : left;
height : 60px;
}.a2 {
width: 200px;
border-width : 1px;
border-color : Black;
border-style : solid;
height : 60px;
float : right;
}.a3 {
width: 200px;
border-width : 1px;
border-color : Red;
border-style : solid;
height : 60px;
float : left;
}.head {
width : 50%;
background-color : Silver;
float : left;
border-width : 2px;
border-color : White;
border-style : solid;
padding : 3px;
}hr {
clear:both;
display:block;
visibility : hidden;
}
If you like to use shorthand and other stuff to make css file smaller, you might want to tweak it a bit.
Hope this helps.
I'm trying a image and image caption div that Suzy suggested earlier:
<div class="imagecaption" style="float: left">
<IMG SRC="image.jpg">
<br>Caption Here
</div>
Is there a way to set the div so that it stays at the width of the image? ie: So the text dosen't drag out but stays within a border?
