Thanks. Took me a bit to reproduce, but I think I've figured this out for the most part.
The first issue is right here: <playerimage size=360>. I can't recall if I knew this was slightly different going into version 3.7 or not, but the XML parser apparently works a little differently. It does not like that the attribute value doesn't have quotes around it. To fix this, add quotes: <playerimage size="360">. This will size your player image correctly. Without it the size defaults to 100 pixels. And to get around that, I had to change the player image size override for the Game window in the Display section of the Preferences tab. Using quotes fixes the sizing.
As for the <table> version, I honestly don't know why the element in one <td> would be aligned differently than the other. I'm sure there's some obscure CSS rule somewhere that explains it. But you can fix this by setting the alignment in the first <td>:
<table>
<tr>
<td style="vertical-align: top"><playerimage size="360"></td>
<td><img src="C:\...\joe2.png" width="360" height="360"></td>
</tr>
</table>
With the adjustments, the two methods are more or less equal, but the table version has some extra whitespace around the images and even more whitespace at the bottom. I'm sure that could be cleared up with some more adjustments, but I would just use the simpler flexbox version, as it adds no additional whitespace.
Ultimately I see what is missing is an option to utilize the player image in a way you want. That is, the <playerimage> output will be rendered according to the player image preferences: it will be a specific size (unless overridden with the size attribute), and will have a border and background color and be shaped according to the player image preferences. It would be nice I think to have another token that provides just the image path, allowing you to put that image into any HTML you want without restriction. Thanks for bringing this to my attention.