Trouble Creating a Table Layout

Page 1 of 1

4 Replies - 495 Views - Last Post: 24 October 2010 - 03:07 PM

#1 staindromeo  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 101
  • Joined: 21-October 10

Trouble Creating a Table Layout

Posted 21 October 2010 - 09:44 AM

Hey everyone!

I am having trouble creating a table layout as displayed in the image below. I am looking at having 3 columns and 4 rows and creating an exact layout like the table below with the colors.

Here's the layout:
Posted Image

Here's my code so far: 

 <div>
        <table bgcolor="black" id="TABLE1">
                   
                   <tr>
                       <td align="center" valign="middle"></td>
                       <td align="center" valign="middle"></td>
                       <td align="center" valign="bottom">Quaterly ,jhvg</td>
                       <td style="border-bottom-style: solid #000000
1px;"></td>
                   </tr>

</table>
</div>


Is This A Good Question/Topic? 0
  • +

Replies To: Trouble Creating a Table Layout

#2 Vaspar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 12-February 10

Re: Trouble Creating a Table Layout

Posted 21 October 2010 - 11:48 AM

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}


.container {
padding-top: 10px;
width: 960px;
background: cyan;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}

.sidebar1 {
border : none;
float: left;
width: 180px;
background: red;
padding-bottom: 10px;
text-align: center;
vertical-align: top;
height: 40px;
}

td {
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.content {

padding: 0;
text-align: center;
width: 600px;
float: left;
}
.sidebar2 {
float: left;
width: 180px;
background: red;
text-align: center;
vertical-align: top;
height: 40px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}

</style>
</head>

<body>
<div class="container">
<div class="sidebar1">
<table width="180" height="50">
<tr>
<td align="center" valign="top">XXX
</td>
</tr>
</table></div>
<div class="content">
<div class="logo">Mudi</div>
</div>
<div class="sidebar2">
<table width="189">
<tr>
<td align="center" valign="top">X
</td>
</tr>

<tr>
<td align="center" valign="top">Y
</td>
</tr>
</table></div>
</div>
</body>
</html>
Was This Post Helpful? 0
  • +
  • -

#3 staindromeo  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 101
  • Joined: 21-October 10

Re: Trouble Creating a Table Layout

Posted 21 October 2010 - 12:40 PM

View PostVaspar, on 21 October 2010 - 10:48 AM, said:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}


.container {
padding-top: 10px;
width: 960px;
background: cyan;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}

.sidebar1 {
border : none;
float: left;
width: 180px;
background: red;
padding-bottom: 10px;
text-align: center;
vertical-align: top;
height: 40px;
}

td {
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.content {

padding: 0;
text-align: center;
width: 600px;
float: left;
}
.sidebar2 {
float: left;
width: 180px;
background: red;
text-align: center;
vertical-align: top;
height: 40px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}

</style>
</head>

<body>
<div class="container">
<div class="sidebar1">
<table width="180" height="50">
<tr>
<td align="center" valign="top">XXX
</td>
</tr>
</table></div>
<div class="content">
<div class="logo">Mudi</div>
</div>
<div class="sidebar2">
<table width="189">
<tr>
<td align="center" valign="top">X
</td>
</tr>

<tr>
<td align="center" valign="top">Y
</td>
</tr>
</table></div>
</div>
</body>
</html>


Hey I am trying to use this code for an ASP.NET Web Form, so do I have to create a seperate CSS style sheet in Visual Studio or can this just be incorporated in the code.
Was This Post Helpful? 0
  • +
  • -

#4 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Trouble Creating a Table Layout

Posted 22 October 2010 - 01:44 AM

Using an external style sheet is best practice and optimal however using tables for layout isnt a good use of HTML either so I guess best practice isnt an issue here.

You have a good (and correct) reason to use a table for the data produced, however the rest of the layout should be using div,p and CSS.
Was This Post Helpful? 0
  • +
  • -

#5 Guest_staindromeo*


Reputation:

Re: Trouble Creating a Table Layout

Posted 24 October 2010 - 03:07 PM

I was wondering how I could achieve Absolute Positioning between two tables. I have come a long way in terms of designing a html layout from the time I asked my last question here. I want the tables to be joined together, because right now the set up basically has one table a small gap in between and another then the next table starts. How do I join both the tables together, so that they could be one. Please keep in mind I haven't used any CSS in my project so far & in terms of design it's pretty much done besides this one thing.

Please help me out
Thanks
Was This Post Helpful? 0
Page 1 of 1