HTML Rowspan Question

HTML & CSS
1

I cannot for the life of me get the images in this code to line up correctly. What I need is for image 4 to line with image 3 but for the life of me I cannot get the Rowspan command to work.I am sure it is something obvious but I cannot figure it out.

1221Ă—935 222 KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tables</title>
</head>

<body>
<table align="center" width="900" border="0">
 
 
 
<tr > <td><img src="image1.jpg" /></td> <td><img src="image2.jpg" /></td> <td> <img src="image2.jpg" /></td> <td><img src="image2.jpg" /></td> </tr>


<tr> <td colspan="2" ><img src="image3.jpg" /> </td>  </tr> 


<tr height="255" > <td > &nbsp;</td> <td height="255" > I created a 3x4 table with 8 cells I created a 3x4 table with 8 cells  I created a 3x4 table with 8 cells I created a 3x4 table with 8 cells</td>
<td colspan="2" rowspan="2"  > <img  src="image4.jpg" /> </td> </tr>



 </table>



</body>
</html>
2

You wouldn’t use a table for this, since it’s not tabular data. Here’s an example:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
    #box {width:450px}
    #box div {float:left;border:1px solid white}
    #div1 {width:140px;height:100px;background-color:pink}
    #div2 {width:100px;height:100px;background-color:green}
    #div3 {width:240px;height:100px;background-color:cyan}
    #div4 {width:200px;height:200px;background-color:yellow}
</style>
</head>

<body>
<div id="box">
    <div id="div1">Image 1
    </div>
    <div id="div2">Image 2
    </div>
    <div id="div2">Image 2
    </div>
    <div id="div2">Image 2
    </div>
    <div id="div3">Image 3
    </div>
    <div id="div4">Image 4
    </div>
</div>
</body>
</html>
3 Likes
3

Hi there Ben_Lambourne,

here is a fully responsive example…

[code]

untitled document body { background-color:#f0f0f0; } #images { max-width:924px; padding:0.32467%; margin:0 auto; border:1px solid #999; overflow:hidden; list-style:none; background-color:#fff; box-shadow:0.5em 0.5em 0.5em #999; } #images li { float:left; margin:0.32467%; border:1px solid #000; box-sizing:border-box; } .i0 { width:32.475%; } .i1 { width:21.645%; } .i2 { clear:both; width:54.762%; } .i3 { width:43.939%; } #images img { display:block; width:100%; }
[/code]

coothead

2 Likes
4

I doubt that rowspan had anything to do with the problem. You probably did not add {vertical-align:top} to the cells. By default, table cells align to the baseline which sometimes causes just that problem.

That said, your layout is not spreadsheet style data, so unless this is for an HTML newsletter, @coothead’s non-table code rocks!

EDIT:

If you are past “a certain age” and your head is accustomed to using tables, this is a layout that uses CSS to apply HTML table behaviors to non-table elements (thus avoiding the wrath of the “tables-be-gone” marchers). The layout is fluid. Perhaps this will ease the transition from table-think to more modern styling practices.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled document</title>
<!--
https://www.sitepoint.com/community/t/html-rowspan-question/215690
Ben_Lambourne
Feb 17,2016 3:31 PM
-->
<style media="screen">
body {
    background-color:#f0f0f0;
}
.outer {
    width:80%;
    margin:0 auto;
}
.trow {
    display:table;
    width:100%;
}
figure {
    display:table-cell;
    vertical-align:top;
    padding:1px;
    margin:0;
}
.i0 {width:32.475%;}
.i1 {width:21.645%;}
.i2 {width:54.762%;}
.i3 {width:43.939%;}
img {
    display:block;
    width:100%;
    height:auto;
}
</style>
</head>
<body>

<div class="outer">
    <div class="trow">
        <figure class="i0"><img src="http://placehold.it/300x230" alt=""></figure>
        <figure class="i1"><img src="http://placehold.it/200x230" alt=""></figure>
        <figure class="i1"><img src="http://placehold.it/200x230" alt=""></figure>
        <figure class="i1"><img src="http://placehold.it/200x230" alt=""></figure>
    </div>
    <div class="trow">
        <figure class="i2"><img src="http://placehold.it/506x230" alt=""></figure>
        <figure class="i3"><img src="http://placehold.it/406x450" alt=""></figure>
    </div>
</div>

</body>
</html>
2 Likes
5

I sometimes find doing the following to help:
box-sizing: border-box;
(you might have to add vendor prefixes to it)

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.