WordPress.org

Support

Support » How-To and Troubleshooting » Creating a table for staff pictures.

Creating a table for staff pictures.

  • 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?

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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.

    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.

    http://pixelvolt.com/about

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

    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?

    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>

    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…

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

    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>

    Thanks so much. 🙂

    My pleasure

    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?

    <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>

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Creating a table for staff pictures.’ is closed to new replies.
Skip to toolbar