Programming Help

Web Development



What's Here?

  • Members: 136,578
  • Replies: 479,711
  • Topics: 74,761
  • Snippets: 2,567
  • Tutorials: 677
  • Total Online: 1,936
  • Members: 88
  • Guests: 1,848

Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,578 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,936 people online right now. Registration is fast and FREE... Join Now!




colspan logic

 
 Reply to this topicStart new topic

colspan logic
dreamincodehamza
27 Sep, 2008 - 02:03 PM
Post #1

D.I.C Head
Group Icon

Joined: 12 Sep, 2008
Posts: 110


Dream Kudos: 75
My Contributions
Problem or explanation is below :
i am getting so much confuse with colspan so,
please explain me the logic of colspan in the whole format or layout . . .
why we have given the colspan=2 in the first row ?
vice versa smile.gif
pleaase download the table.zip file
in which source code is present




Attached File(s)
Attached File  table.zip ( 19.04k ) Number of downloads: 10
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Colspan Logic
27 Sep, 2008 - 03:20 PM
Post #2

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
I don't think you're going to get many takers on downloading a random zip file, you should probably just post the code.

colspan is relative to the td elements, not rows as the number of table data elements or cells, determines the number of columns.
User is offlineProfile CardPM
+Quote Post

dreamincodehamza
RE: Colspan Logic
27 Sep, 2008 - 04:06 PM
Post #3

D.I.C Head
Group Icon

Joined: 12 Sep, 2008
Posts: 110


Dream Kudos: 75
My Contributions
Problem or explanation is below :
i am getting so much confuse with colspan so,
please explain me the logic of colspan in the whole format or layout . . .
why we have given the colspan=2 in the first row ?
vice versa
pleaase download the table.zip file
in which source code is present

index1.html page code
CODE

<html>
<head>
<title>index1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index1.psd) -->
<table id="Table_01" width="750" height="751" border="1" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td colspan="2">
            <img src="images/index1_01.gif" width="378" height="66" alt=""></td>
        <td>
            <img src="images/index1_02.gif" width="372" height="66" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index1_03.gif" width="750" height="61" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index1_04.gif" width="750" height="49" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index1_05.gif" width="750" height="58" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index1_06.gif" width="190" height="454" alt=""></td>
        <td colspan="2">
            <img src="images/index1_07.gif" width="560" height="454" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index1_08.gif" width="750" height="62" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="190" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="188" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="372" height="1" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


if you want to see the images as well then you will download the zip file in my
very first post it is attatched check that out
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Colspan Logic
27 Sep, 2008 - 04:38 PM
Post #4

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
The first row contains 2 cells, while the last row has 3. This requires for proper alignment that all rows must cover 3 cells or columns. Thus some of the rows have 1 cell which spans all 3 columns, while the first row has a cell which spans 2 columns and a cell which spans 1 column.

There are 7 rows the end result is:
CODE

row1:|+++++++++|++++|
row2:|++++++++++++++|
row3:|++++++++++++++|
row4:|++++++++++++++|
row5:|+++++++++|++++|
row6:|++++++++++++++|
row7:|++++|++++|++++|


I've used | to denote cell walls, and + symbols to denote the data inside a cell.

This post has been edited by William_Wilson: 27 Sep, 2008 - 04:39 PM
User is offlineProfile CardPM
+Quote Post

dreamincodehamza
RE: Colspan Logic
27 Sep, 2008 - 05:02 PM
Post #5

D.I.C Head
Group Icon

Joined: 12 Sep, 2008
Posts: 110


Dream Kudos: 75
My Contributions
yeah right let me think on it and try to understand my self ....
You seems expert in it
so do me a favour tha can you convert this layout in div. . .
its been very kind of you ./
if you do this
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Colspan Logic
27 Sep, 2008 - 05:11 PM
Post #6

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
to do this with divs you will need to set some widths and apply some css, it will also be dependent on the data inside for alignment.
At least give it a try and ask questions if you need help.
User is offlineProfile CardPM
+Quote Post

mohsinsha
RE: Colspan Logic
29 Sep, 2008 - 10:30 PM
Post #7

New D.I.C Head
*

Joined: 18 Sep, 2008
Posts: 8
Try this one

<html>
<head>
<title>index1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Col Span</h1>
<table id="Table_01" width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="25%">Cell 1
</td>
<td width="25%">Cell 2
</td>
<td width="25%">Cell 3
</td>
<td width="25%">Cell 4
</td>
</tr>
<tr>
<td colspan="2" align="center" width="50%"><b>Merged two cells Togather with the help of "colspan". (Cell 1 + Cell 2)</b>
</td>
<td width="25%">Cell 3
</td>
<td width="25%">Cell 4
</td>
</tr>
</table>

<h1>Col Span</h1>
<table id="Table_01" width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center" width="100%"><b>Merged four cells Togather with the help of "colspan". (Cell 1 + Cell 2 + Cell 3 + Cell 4)</b>
</td>
</tr>
<tr>
<td width="25%">Cell 1
</td>
<td width="25%">Cell 2
</td>
<td width="25%">Cell 3
</td>
<td width="25%">Cell 4
</td>
</tr>
<tr>
<td>Cell 5
</td>
<td>Cell 6
</td>
<td>Cell 7
</td>
<td>Cell 8
</td>
</tr>
</table>
<h1>Row Span</h1>
<table id="Table_01" width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="2" width="25%"><b>Merged two cells togather with the help of "rowspan". (Cell 1 + Cell 5)</b>
</td>
<td width="25%">Cell 2
</td>
<td width="25%">Cell 3
</td>
<td rowspan="2" width="25%"><b>Merged two cells togather with the help of "rowspan". (Cell 4 + Cell 8)</b>
</td>
</tr>
<tr>
<td>Cell 6
</td>
<td>Cell 7
</td>
</tr>
</table>
</body>
</html>
User is offlineProfile CardPM
+Quote Post

dreamincodehamza
RE: Colspan Logic
30 Sep, 2008 - 04:16 PM
Post #8

D.I.C Head
Group Icon

Joined: 12 Sep, 2008
Posts: 110


Dream Kudos: 75
My Contributions
Mr mohsan shah
can you make this layout in div
User is offlineProfile CardPM
+Quote Post

mohsinsha
RE: Colspan Logic
30 Sep, 2008 - 07:17 PM
Post #9

New D.I.C Head
*

Joined: 18 Sep, 2008
Posts: 8
You need to clear some things about table & div.

1. There is no colspan or rowspan in div.

2. If you want that table in div, just put <div> tag before the table & </div> tag after the table.
User is offlineProfile CardPM
+Quote Post

dreamincodehamza
RE: Colspan Logic
1 Oct, 2008 - 05:05 PM
Post #10

D.I.C Head
Group Icon

Joined: 12 Sep, 2008
Posts: 110


Dream Kudos: 75
My Contributions
william wilson
If we add more rows in first cols then we what will be the rows in the end.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/3/08 12:19AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month