{DIY} HTML Tables // Part II

Oh Happy Day! More HTML Table fun!  My hubby is assisting us once again with HTML Tables Part II.  Are we lucky girls or what? He’s a great teacher with this technical jibber jabber and seems to make it a little more understandable than some tutorials, you know, the ones that just simply make you go cross-eyed {giggle}.  So, let’s now learn how to add some spice to our tables.

Those of you who have worked in Microsoft Excel may be familiar with the “Merge Cells” feature. For those not familiar with the feature, it allows you to take two (or more) cells and merge them in to one cell. The width of the merged cell is the same as the combined width of the two (or more) individual cells. HTML tables provide a similar function with the colspan option.

The Basics of “Merging” Cells

In the original post, {DIY} HTML Tables, we built a basic two row and two column table to align images of the same size. But now you’re bored with four square format and want to add some variety to the table. What if you want to use an image that stretches across the width of two column? Well, we can do this using the colspan option.

The code below shows the original structure of a two row and two column table.

<table border = "0">
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
    </tr>
  </tbody>
</table>

We modify this code with the addition of the colspan option placing it within the <td> tag. We use colspan="2" because we want the row to span “2” columns. Now, since each <td> tag defines a column, and we told the first <td> to span both columns, we do not need the second <td> tag. I drew a line through it for a totally awesome effect, but you will have to remove that line of code completely.

<table border = "0">
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
    </tr>
    <tr>
      <td colspan="2">Row 2 Column 1 and 2 Merged</td>
      <td>Row 2 Column 2</td>
    </tr>
  </tbody>
</table>

Once you remove it, your finished code should resemble the code below.

<table border = "0">
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
    </tr>
    <tr>
      <td colspan="2">Row 2 Column 1 and 2 Merged</td>
    </tr>
  </tbody>
</table>

Here is what the table code above will look like parsed by the web browser.

How To Use It

Table 1 shows the basic two row and two column table. We use the table to place two 125 x 125 pictures in each cell of the first row leaving row 2 columns 1 and 2 for additional pictures.

Table 1

Row 2 Column 1	Row 2 Column 2

Next, we decide to add a 250 x 125 picture in row 2. If we simple add it to one of the cells, that cell not only stretches to accomodate this larger picture, but also stretches the corresponding column in row 1. The unpleasant result is shown in Table 2.

Table 2

	Row 2 Column 2

By spanning the row across two columns, we create a single cell that has the width of two columns as shown in Table 3.

Table 3

Maybe you want three 125 x 125 pictures in row 1, and two pictures in row 2 with one being 250 x 125 and the other 125 x 125? That can be easily done by applying the same colspan principles. But rather than give you the code, I will let you try to figure it out. Hint: you can view the source code of this webpage.

Table 4

Well, what do you think?  Doable?  Good luck!  If you found these tutorials helpful, be a dear and pin it and/or stumble it?  Spread a little {love}. Thanks so much.  Make it a fabulous day, friends!

Subscribe to Updates | Like on Facebook | Follow on Pinterest

Pin It

Related Posts

{DIY} HTML Tables

Making a Bloggy Grab Button {Tutorial}

Oops! I did it again...

Farmhouse Inspired Master Bedroom Makeover (Before we moved!)

DIY Wall Paneling Ideas

25+ Pineapple Projects and Printables