Images don’t fit well into table cells

  • I am working with template Twenty Seventeen. I have to organize some images into a table with a nice border . The images have different width and height and the table’s td are nested using colspan and rowspan. Everything, outside WP is ok , I mean in terms of dimensions of the cells and images contained .But when I put the code into WP page the the images get different sizes , they are not well displayed and proportions between cells and images are changed respects working outside WP. Here the code 

    <table class="table6 table6_1" style="width:100%; height:520px; background-color: #D0E5DE; " >
	<tr>
	<td style="width:15%; font-size:0;"><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_1.png" alt="" width="170" height="320px" ></td>
	<td style="width:15%; font-size:0;"><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_2.png" alt="" width="170" height="320px" ></td>
		<td rowspan="2" style="width:35%; font-size:0px;"><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_3.png" alt="" width="300" height="520px"  ></td>
	<td rowspan="2" style="width:35%; font-size:0px; "><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_4.png" alt="" width="300" height="520px"  ></td>
	</tr>
	<td colspan="2" style="width:30%; font-size:0px; "><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_5.png" alt="" width="340" height="200"  ></td>
</table>

.imgs1{
    margin:0;
	padding:0;
 }
.table6 td{
	border:10px solid; 
	border-color: #DBB89A;
}
.table6_1{
	border-collapse: collapse;
	border:10px solid; 
	border-color: #DBB89A;
}

    Thank you for any help

Viewing 5 replies - 1 through 5 (of 5 total)

  • Are you using the block editor or classic editor? I would use the block editor and then utilize the columns block.

    Also, why do you have a height attribute set for the table? Your height is set to the image height and doesn’t allow added space needed by your border attributes. Please remove the height attribute on the table and see how it looks.

    I noticed that your image source is “localhost” Does that mean you are working on your computer and not an Internet viewable site?

    Thread Starter valerio

    (@valgo54)

    Hi Tim thank for your answer.I am using block editor , usually I prepare the code in external?html file and the I put it on the html block page.As You suggest I remove the height?attribute at the table level but didn’t solve.In my email answer I attached a jpg to show you how happened the page. The strange thing is that using the same code in an external html file everything is correct and I don’t?have any unwanted space between borders and imgs.I confirm you ,I am working locally.

    I believe I got your table to display on my computer after making a few minor changes to your code. Here is what I have:

    <!DOCTYPE html>
<html>
<head>
<style>
.imgs1 {
    margin:0;
	padding:0;
 }
.table6 td {
	border:10px solid; 
	border-color: #DBB89A;
}
.table6_1 {
	border-collapse: collapse;
	border:10px solid; 
    border-color: #DBB89A;
}
</style>
</head>
<body>

<table class="table6 table6_1" style="width:100%; background-color: #D0E5DE; " >
	<tr>
	<td style="width:15%; font-size:0;"><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_1.png" alt="" width="170" height="320" ></td>
	<td style="width:15%; font-size:0;"><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_2.png" alt="" width="170" height="320" ></td>
		<td rowspan="2" style="width:35%; font-size:0px;"><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_3.png" alt="" width="300" height="520"  ></td>
	<td rowspan="2" style="width:35%; font-size:0px; "><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_4.png" alt="" width="300" height="520"  ></td>
	</tr>
	<td colspan="2" style="width:30%; font-size:0px; "><img class="imgs1" style="display:block;" src="https://localhost/Wp_BellaEpoque\Cod_html_page_gallery_eventi\images\img_5.png" alt="" width="340" height="200"  ></td>
</table>
    </body>
</html>

    I also created a test page on a dev site using your approach and this is what is looks like albeit without your images:

    https://dot832.dev/gmofreeusa/test-table/

    Thread Starter valerio

    (@valgo54)

    Hi Tim
    Sorry for this long time with any replies by me. In this time I didn’t receive any e-mail of advice “new message” and so I thought there were no updates related my topic. Today I tested the code you suggest into web site but I still have unwanted spaces between images and borders. In my experience the html code working fine outside web site could be no working in WP web site as well( this concerning free Generate Press theme). Anyway I found an alternative solution using a WP plugin Envira Gallery to diplay images in a simpler way.
    Thanks again for your help
    Valerio

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Images don’t fit well into table cells’ is closed to new replies.