SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Merging last 3 col into 1 col?

    hey folks i m working on a layout in which i need the last column of 3 tables should be one column. i wanna merge it. i know how to merge 2 2 in a row but it is possible for what i am trying to achieve. here is the code. whee it says "this col" that what i need to merge. is it possible?
    Code HTML4Strict:
    <td><table width="1050" border="0" cellspacing="0" cellpadding="0">
                                                                          <tr>
                                                                            <td width="25">&nbsp;</td>
                                                                            <td width="312" style="background-color:#d5e6f0; border:1px #0064a2 solid;">&nbsp;</td>
                                                                            <td width="25">&nbsp;</td>
                                                                            <td width="312" style="background-color:#d5e6f0; border:1px #0064a2 solid;">&nbsp;</td>
                                                                            <td width="350">This col</td>
                                                                            <td width="25">&nbsp;</td>
                                                                          </tr>
                                                                        </table></td>
                                                                      </tr>
                                                                      <tr>
                                                                        <td><table width="1050" border="0" cellspacing="0" cellpadding="0">
                                                                          <tr>
                                                                            <td width="25">&nbsp;</td>
                                                                            <td>&nbsp;</td>
                                                                            <td width="350">This col</td>
                                                                            <td width="25">&nbsp;</td>
                                                                          </tr>
                                                                        </table></td>
                                                                      </tr>
                                                                      <tr>
                                                                        <td><table width="1050" border="0" cellspacing="0" cellpadding="0">
                                                                          <tr>
                                                                            <td width="25">&nbsp;</td>
                                                                            <td width="312" style="background-color:#d5e6f0; border:1px #0064a2 solid;"></td>
                                                                            <td width="25">&nbsp;</td>
                                                                            <td width="312" style="background-color:#d5e6f0; border:1px #0064a2 solid;"></td>
                                                                            <td width="350">This col</td>
                                                                            <td width="25">&nbsp;</td>
                                                                          </tr>
                                                                        </table></td>
    All those who wander aren't lost.

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    woah.. you have a table inside of a cell? The markup showed a closing data tag outside of a closing table tag.

    Besides the admonishing that you should use css for layout... you need to look into colspan to merge.

    Are you not using Dreamweaver or GoLive? Those have visual merge

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i need to learn raw html
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You can't merge cells from different tables. Your HTML is also overly complicated. As posted above, if this is simply for layout purposes, you should look as CSS, which is a lot easier to work with and a lot more accurate than HTML tables. If you're trying to make a table with alternating background colours for both rows and columns with some common cells (which doesn't seem to be the case, as you have no headers), you can simply do this:

    Code html4strict:
    <table>
     <tr class="odd">
      <td>
      <td class="even">
      <td>
      <td class="even">
      <td rowspan="3">
      <td class="even">
     </tr>
     <tr>
      <td>
      <td colspan="3">
      <td class="even">
     </tr>
     <tr class="odd">
      <td>
      <td class="even">
      <td>
      <td class="even">
      <td class="even">
     </tr>
    </table>

    Code css:
    .odd td.odd {
     background-color: #eee;
    }

    See how beautiful CSS is?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To learn proper HTML you must have to visit w3schools. You will find here all sorts of coding languages, their procedure and the learning process along with practice.

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    You can't merge cells from different tables. Your HTML is also overly complicated. As posted above, if this is simply for layout purposes, you should look as CSS, which is a lot easier to work with and a lot more accurate than HTML tables. If you're trying to make a table with alternating background colours for both rows and columns with some common cells (which doesn't seem to be the case, as you have no headers), you can simply do this:

    Code html4strict:
    <table>
     <tr class="odd">
      <td>
      <td class="even">
      <td>
      <td class="even">
      <td rowspan="3">
      <td class="even">
     </tr>
     <tr>
      <td>
      <td colspan="3">
      <td class="even">
     </tr>
     <tr class="odd">
      <td>
      <td class="even">
      <td>
      <td class="even">
      <td class="even">
     </tr>
    </table>

    Code css:
    .odd td.odd {
     background-color: #eee;
    }

    See how beautiful CSS is?
    I see where your going with this, but lets say you have 100 table rows, and one of them is removed, you'll be scrambling to update the html class convention.

    I think JavaScript would be probably most appropriate for now(browser support) for targeting these Element Nodes.

  7. #7
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    If you have a table with 100 rows, chances are it has been generated server-side. If not, the problem is solved fairly easily as well:

    1. Copy-paste the part of the table below the removed row to a text editor
    2. Search-replace <tr> with <tr class="*">
    3. Search-replace <tr class="odd"> with <tr>
    4. Search-replace <tr class="*"> with <tr class="odd">
    5. Copy-paste the new table code back into the page


    Unless the table is ridiculously big, this operation should not take more than a minute.

    I prefer to use CSS for design, rather than Javascript

    (There's a small error in the CSS, by the way - the selector should be .odd td.even).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    I prefer to use CSS for design, rather than Javascript

    (There's a small error in the CSS, by the way - the selector should be .odd td.even).
    Once css3 is widely supported, i'd agree with you.... Currently most browsers don't have the support to target such element nodes, without adding extraneous class conventions.

    You can do search and replaces, but that is still some work you have to do.

  9. #9
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The code I posted should work in most browsers, including IE6.

    As for the amount of work involved, I would argue that writing the Javascript code is a lot more work than spending a minute or two every now and again.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •