Adding tables to twentyeleven

  • Author
  • #910064


    This is a test site.

    Can the front page content be made to extend the full width?
    I’d like it to be a table, width 70% 30% and a border around the table

    The blog I need help with is



    I’ve tried sticking style tags around but can’t seem to get it to move left

    <table style="left:-400px!important;width:1000px!important;border:0!important;" width="100%" border="0" cellspacing="1" cellpadding="1">

    The left tag doesn’t work. Of course this is a crappy way of doing it too…



    The left property doesn’t work by itself: it’s associated with the position property.
    Other remarks:
    The !important command is for the CSS editor.
    border=”0″, cellspacing=”1″, cellpadding=”1″ are outdated and don’t work.
    Setting a 100% width is superfluous, because that’s the default in 2011.

    The easiest way to create full-width content is to enclose it in a div with negative margins:

    <div style="margin:0 -207px;">



    I’ve found a different issue. The theme is ‘responsive width’. Normally images etc will scale.

    But tables will not scale?
    I added that div to this page

    since the -207px; is fixed it will stuff up once the page starts to shrink.
    Also the images in captions also won’t shrink with the page.



    I’ve changed your code to use % instead of px, and got it looking OK and centered.
    But once it shrinks to a point it ‘blows up’



    Yes, forgot that, horizontal adjustments should be expressed in percentages if the width is flexible.

    But I thought you only wanted to change the content width of the intro page. If you want do that for all pages, you’re simply using the wrong theme: select a different theme – one that doesn’t have the (rare) flaw of retaining the same width for pages with and without sidebar.

    As for your “Events” page, you don’t need a table to arrange multiple images: use the gallery feature.



    I need the table to have the caption. The gallery captions don’t get the frames.

    Did you see how the front page goes weird when the browser gets very narrow?



    a) Even so, a table is an unnecessary complication. Use coding for two columns instead. See here:

    b) Yes, and that’s yet another reason to switch to a different theme – a fixed-width one.



    OK I’ll look at that.

    Something separate, in this page
    Can you tell me why the images now break the text up? It didn’t used to so I’d get the links in a row and pics every now and then.



    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    • Align-left means position left, with the rest of the content wrapping around the right side of the image.
    • Align-right means position right, with the rest of the content wrapping around the left side of the image.
    • Align-center means position center, with no wrap-around (= the rest of the content below the image).
    • If you want two images to be side by side on the same line start by setting the alignment of both images to left. see > To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
      <br style="clear:both;" />



    It’s not the images, it’s the h tags. By default, a heading is formatted as a separate block, so when you have (erroneously) enclosed link plus image in h3 tags, the rest of the content will start below the image.

    The h tags have a specific meaning for search engines and screen readers, so you should only use them for actual headings of articles, not just to change the styling of any text. To change the styling of your links, you add style to the a tags. See here:



    they are intended actual headings, as links to pages.
    I just wanted images littered around, and they are set to alignright etc
    I’ve tried moving images outside h, using <br style=”clear:both;” />, but all the same still.



    A heading is the title of a chapter or a section. By definition, a heading presupposes other, subordinate text below it. So your links aren’t “actual” headings: they may be “intended” headings but the intention is wrong.

    Timethief’s reply is irrelevant: the clear:both command does the opposite of what you want.

    As I already said, what you need to do is delete the h tags altogether and use style inside the a tags.

The topic ‘Adding tables to twentyeleven’ is closed to new replies.