1

I'm trying to create a table with pictures and I want that on the first tr the picture will be big and in the second they will be smaller in 50%. how can I remove the space between them?

Html

<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr>
        <td><img src="Dad.jpg" alt="dad" /></td>
        <td><img src="gili.jpg" alt="gili" /></td>
        <td><img src="me2.jpg" alt="me" /></td>
    </tr>
    <tr style="border-collapse: collapse;">
        <td><img src="Hotrack.jpg" alt="hotrack" /></td>
        <td><img src="shir.jpg" alt="shir" /></td>

        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>

    </tr>

</table>

Picture for illustration:

http://postimg.org/image/osfwnnmxv/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ravid Gal
  • 47
  • 1
  • 7
  • Don't use a table as a layout. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – timr Apr 04 '15 at 22:38

2 Answers2

0

As SeaSarp said, do not use tables. You can use the ul and li elements instead. To archive what you want, you can create two lists (one for every line) and put the images in each li. Like this:

<ul>
    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>
</ul>

<ul>
    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>
</ul>

By default the lists have a vertical layout and some other particulars, you can change it using css:

ul {
    list-style:none; /* Do not show list points */
    display: flex; /* All elements together */
}

ul li {
    display:inline-block; /* All elements inline */
}

Example: http://jsfiddle.net/xe9a1ev9/

Rafael Almeida
  • 677
  • 7
  • 21
-1

Split it into 2 tables:

<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr>
        <td><img src="Dad.jpg" alt="dad" /></td>
        <td><img src="gili.jpg" alt="gili" /></td>
        <td><img src="me2.jpg" alt="me" /></td>
    </tr>
</table>
<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr style="border-collapse: collapse;">
        <td><img src="Hotrack.jpg" alt="hotrack" /></td>
        <td><img src="shir.jpg" alt="shir" /></td>

        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>

    </tr>

</table>
Tyler Day
  • 1,690
  • 12
  • 12