Terrible Layout - php and html/tables intermxed

I am working on a project currently where the Index.php file basically acts as a layout page and basically uses tables for the layout.

Please have a look at it's contents below. This is just a small part of the code, there's much more like this.

I need to pass on this file to a Front End Developer/ Designer so that he could change the layout as well as change the code to use CSS instead of Tables for the layout. But I think this is a mess and the designer might have issues understanding and modifying this.

What's the best way to structure and organize this code so that

1)The code becomes much more cleaner, structured and organized.

2)It's easier for the Designer to understand and change the layout.

<table width="770" border="0" cellspacing="0" cellpadding="0" align="center">

  <tr><td colspan="3"><?php include("header.inc.php"); ?>

      </td></tr>    

<tr>


    <?php
    if ($xview == "main" || $show_sidebar_always)
    {
    ?>


    <td width="185" id="sidebar_left" valign="top">

        <table width="90%" class="buttons" cellpadding="0" align="center">

        <tr>
        <td>
        <!-- Begin Version 5.0 -->
        <a href="index.php?cityid=0"><?php echo $lang['HOME_LINK']; ?></a>
        <!-- End Version 5.0 -->
        </td>
        </tr>

        <tr>
        <td>
        <a href="<?php echo $postlink; ?>"><?php echo $lang['POST_LINK']; ?></a>
        </td>
        </tr>


        <?php if($enable_calendar) { ?>
        <tr>
        <td>
        <a href="<?php echo $posteventlink; ?>"><?php echo $lang['POST_EVENT_LINK']; ?></a>
        </td>
        </tr>
        <?php } ?>

        <?php if($enable_images) { ?>
        <tr>
        <td>
        <a href="<?php echo $postimagelink; ?>">&l开发者_开发知识库t;?php echo $lang['POST_IMG_LINK']; ?></a>
        </td>
        </tr>
        <?php } ?>


        <?php if($forum_dir) { ?>
        <tr>
        <td>
        <a href="<?php echo $forum_dir; ?>" target="_blank"><?php echo $lang['FORUM_LINK']; ?></a>
        </td>
        </tr>
        <?php } ?>
        <tr>
            <td>
            <?php if($auth->id) { ?>
            <a href="index.php?view=myaccount" title="">My Account</a>
            <a href="index.php?view=bookmarks" title="">Watch List</a>

            <a href="index.php?view=login&amp;logout" title="">Logout</a>
            <?php }else{ ?>
            <a href="index.php?view=login" title="">Login</a>
            <a href="index.php?view=register" title="">Sign up</a>
            <?php } ?>
            </td>
        </tr>
        </table>
        <br>

To improve readability try using Alternative PHP Syntax in your HTML output.

<?php if($enable_calendar): ?>
     ...
     ...
<?php endif; ?>

Instead of:

<?php if($enable_calendar) { ?>
     ...
     ...
<?php } ?>

The closing blocks are a bit more intuitive than just a closing curly brace.

It would be better to let the designer create a completely new layout and then add the PHP logic into into. If you rewrite this I strongly suggest using a template engine.

Mmm. Here are some advices:

1) Use tables only when you want to show a table. Really. Almost 95% of the cases can and must be done using divs.

2) Use a template engine! so you don't mess up your html with your php code (and the designer won't break it). Good templating engines are Smarty (the most popular) and TemplatePower

Hope this helps. Cheers

I recommend you use a Template Engine, like the Smarty Template Engine

You can easily implement.

Use a templating engine like Smarty. Now if you ask around, most people hate Smarty for some reason or another, so do your research first. However it's great when you want the CSS / HTML to be in one place, and the business logic somewhere else.

Regardless of what you end up using, do a little research into the MVC design pattern -- that's a much cleaner way in general of keeping things organized.

I would first start by sorting out all the indentation, I know that's a corny thing to say, but it will be 10 times more readable than it was before you start optimising it.

<table>
    <tr>
        <td><?php echo "hi"; ?></td>
        <td>cell 2</td>
    </tr>
</table>

if you are going to intersperse <?php if(true == true) { ?> with <?php } ?> then try to make sure that they line up.

As a general rule on layout though, tables within tables is soooo 90s :P try reading up on CSS positioning using div elements and laying them out using the CSS instead of in the HTML.

I would take the time to invest your time to a CMS such as WordPress or Drupal, and learn how to apply CSS and PHP styles to the CMS. In particular, as I am familiar with WordPress, I can confidently state that developing a theme for WordPress allows you to intermingle direct PHP.

If using a CMS is not an option, then you probably should decide to create an API for your functions, create proper documentation for these API functions, and ask your developer to call off the API, for another layer of abstraction.

I do not recommend using a templating system such as Smarty, as it creates another layer of difficulty for your developers to learn. PHP as it stands is perfectly fine.