3x3 table using only CSS and Div tags. Please help.

Please help me create a 3x3 table using ONLY CSS and div tags

Page 1 of 1

1 Replies - 8244 Views - Last Post: 04 October 2010 - 12:56 AM

#1 Charlie IronGleet   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 225
  • Joined: 29-January 09

3x3 table using only CSS and Div tags. Please help.

Posted 03 October 2010 - 01:07 PM

Hello,

I am working on the following assignment:
"Create the following table. The table has three rows and three columns. It is centered on the page. The center row is merged into one cell.
The div is centered using 60% of the allotted space. Read that to mean that a 'wrapper' was used. The image contains 7 div elements all having padding of 3 px.. Six of the elements are of the same size. The center element is three time the size of the other six elements.. Use internal CSS to complete the task. "

Here is my code so far - I am figuring I need absolute positioning and I don't know why the borders are not appearing. If someone could show me perhaps how to create just the first three cells(the top row of the table) I could work from that model. AS it is, I'm pretty lost:

<!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>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #999;
	margin-right: auto;
	margin-left: auto;
}
#wrapper {
	width: 60%;
	
}
#cell1 {
	width: 200px;
	float: left;
	height: 200px;
	border: medium;
	border-color:  #F00;
	padding: 3px;
	
}
#cell2 {
	width: 200px;
	float: right;
	height: 200px;
	border: medium;
	padding: 3px;
	border-color: #F00;
}

#cell3 {
	width: 200px;
	height: 200px;
	border: medium;
	position: absolute;
	padding: 3px;
	border-color: #F00;
	
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="cell1">Some Content</div>
<div id="cell2">Some Content</div>
<div id="cell3">Some Content</div>
</div>
</body>
</html>




Thanks for your help!!!
Irongleet

Is This A Good Question/Topic? 0
  • +

Replies To: 3x3 table using only CSS and Div tags. Please help.

#2 husseycoding   User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: 3x3 table using only CSS and Div tags. Please help.

Posted 04 October 2010 - 12:56 AM

Hi Charlie IronGleet,

This kind of thing is exactly what the <table> tag is designed for. You are just making things hard for yourself by building it with divs.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1