Center an image when displayed on a mobile device in HTML - inline - html

Question

So below is this table. It essentially creates a grid of images that goes into an email. because it is an email I need the styling to be in-line. The grid looks great on a desktop but when viewed on a mobile device each table aligns to the left leaving a white space to the right. however, if I change the align tag, the grid no longer works on desktop.
Is there a way with in-line stylings to either get the content to align to the center when viewed on mobile only Or at least get the table to fill the container when viewed on a smaller screen?
<tbody>
<tr>
<td>
<tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
</tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
</td>
</tr>
<tr><td align="left" style=" border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#">
</tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif"><tbody><tr><td align="left" style="border-collapse:collapse;font-family:'Archivo',Arial,sans-serif" valign="top">
<img style="border:0;height:auto;outline:none;text-decoration:none;margin:0;display:block;padding:0!important" width="226" src="#" /></tr></td></tbody></table>
</td>
</tr>
</tbody>
</table>```

Answer 1

I do not know if the table is so important to use ,
but you can do this by simply put the images in for example and the div style will be:
{
display: flex;
flex-direction: column;
align-items: center;
width: '100[%,vw]'; // may not necessary
}
css flex is so important for responsive design.
if not, put your table within div and give the style to the div
mobile device size (width) is generaly <= 768px (without resolution)