WordPress.org

Ready to get started?Download WordPress

Forums

Creating a table for staff pictures. (13 posts)

  1. Mektige
    Member
    Posted 7 months ago #

    I would like to create a table so that my staff photos can be side-by-side on my About page. Doing so without some type of code is proving impossible. Can someone assist me with a simple table code?

  2. Sleneau
    Member
    Posted 7 months ago #

    It'd be helpful to see your site, but if you just want a copy/paste solution, see the code below:

    <table>
    <!--First Row Of 4 Photos-->
    <tr width="100%" border="0">
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    </tr>
    <!--NAMES UNDER THE PHOTOS-->
    <tr width="100%" border="0">
    <td width="25%">Jim</td>
    <td width="25%">BOB</td>
    <td width="25%">Sally</td>
    <td width="25%">Joe</td>
    </tr>
    </table>

    Remember that you can copy everything between the <table> and the </table> tags and paste it to create new rows for your table. Make sure that you paste this into the "Text" side of the content editor for your post, otherwise you'll get something odd. As for putting the image code into your table, simply select the text, and click on the "Add Media" button to the upper-left of your content editor.

  3. Sleneau
    Member
    Posted 7 months ago #

    Note, if you have multiple rows, but less than four entries in the last row. simply delete the code between the <td></td> tags for the correct lines.

  4. Mektige
    Member
    Posted 7 months ago #

    http://pixelvolt.com/about

    I'm attempting it, but seeing as I know literally nothing about coding, I'm confused about the specifics.

  5. Mektige
    Member
    Posted 7 months ago #

    Two questions:

    1. How can I add another line of text below the first? I'd like to add our titles beneath the name. Also, any way to center the names/titles under the pictures?

    2. Will the table break on smaller screens and cause viewing issues?

  6. Sleneau
    Member
    Posted 7 months ago #

    I'll answer your questions in reverse order.

    2). No, the table is based on the percentage of the screen width, and will resize accordingly. The text is a problem, though. I recommend the following change to the text lines:

    <!--NAMES UNDER THE PHOTOS-->
    <tr width="100%" border="0">
    <td width="25%"><p style="font-size:1em;text-align:center;">Jim</p></td>
    <td width="25%"><p style="font-size:1em;text-align:center;">BOB</p></td>
    <td width="25%"><p style="font-size:1em;text-align:center;">Sally</p></td>
    <td width="25%"><p style="font-size:1em;text-align:center;">Joe</p></td>
    </tr>

  7. Sleneau
    Member
    Posted 7 months ago #

    1). As for adding new rows, just copy/paste the whole block of code, and you have a new row. I recommend copy/pasting the following code when you need a new row of photos with names underneath them:

    <table>
    <!--First Row Of 4 Photos-->
    <tr width="100%" border="0">
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    </tr>
    <!--NAMES UNDER THE PHOTOS-->
    <tr width="100%" border="0">
    <td width="25%"><p style="font-size:1em;text-align:center;">Jim</p></td>
    <td width="25%"><p style="font-size:1em;text-align:center;">BOB</p></td>
    <td width="25%"><p style="font-size:1em;text-align:center;">Sally</p></td>
    <td width="25%"><p style="font-size:1em;text-align:center;">Joe</p></td>
    </tr>
    </table>

    I hope that helps...

  8. Mektige
    Member
    Posted 7 months ago #

    I just need there to be a picture, and then two lines of text beneath each. How would I manage that?

  9. Sleneau
    Member
    Posted 7 months ago #

    Oh, sorry about that. To do that, use the following code instead of the blocks I posted above to accomplish that:

    <table>
    <!--First Row Of 4 Photos-->
    <tr width="100%" border="0">
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    </tr>
    <!--NAMES UNDER THE PHOTOS-->
    <tr width="100%" border="0">
    <td width="25%">
    <p style="font-size:1em;text-align:center;">Jim</p>
    <p style="font-size:1em;text-align:center;">Jim's Title</p>
    </td>
    <td width="25%">
    <p style="font-size:1em;text-align:center;">BOB</p>
    <p style="font-size:1em;text-align:center;">Bob's Title</p>
    </td>
    <td width="25%">
    <p style="font-size:1em;text-align:center;">Sally</p>
    <p style="font-size:1em;text-align:center;">Sally's Title</p>
    </td>
    <td width="25%">
    <p style="font-size:1em;text-align:center;">Joe</p>
    <p style="font-size:1em;text-align:center;">Joe's Title</p>
    </td>
    </tr>
    </table>
  10. Mektige
    Member
    Posted 7 months ago #

    Thanks so much. :)

  11. Sleneau
    Member
    Posted 7 months ago #

    My pleasure

  12. Mektige
    Member
    Posted 7 months ago #

    So sorry, but that seems to work except there's a large gap between the name and title. Is there a way to add only a single break rather than a double?

  13. Sleneau
    Member
    Posted 7 months ago #

    <table>
    <!--First Row Of 4 Photos-->
    <tr width="100%" border="0">
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    <td width="25%">REPLACE WITH IMAGE CODE</td>
    </tr>
    <!--NAMES UNDER THE PHOTOS-->
    <tr width="100%" border="0">
    <td width="25%">
    <p style="font-size:1em;text-align:center;margin:0px;">Jim</p>
    <p style="font-size:1em;text-align:center;margin:0px;">Jim's Title</p>
    </td>
    <td width="25%">
    <p style="font-size:1em;text-align:center;margin:0px;">BOB</p>
    <p style="font-size:1em;text-align:center;margin:0px;">Bob's Title</p>
    </td>
    <td width="25%">
    <p style="font-size:1em;text-align:center;margin:0px;">Sally</p>
    <p style="font-size:1em;text-align:center;margin:0px;">Sally's Title</p>
    </td>
    <td width="25%">
    <p style="font-size:1em;text-align:center;margin:0px;">Joe</p>
    <p style="font-size:1em;text-align:center;margin:0px;">Joe's Title</p>
    </td>
    </tr>
    </table>

Reply

You must log in to post.

About this Topic

Tags