User:R0o0di/Sandbox

old

Characters

Conan Edogawa

Ran Mouri

Kogoro Mouri

Eri Kisaki (background)

Heiji Hattori

Hiroshi Agasa

Ai Haibara

Kazuha Toyama (background)

new

Characters

Conan Edogawa

Ran Mouri

Kogoro Mouri

Eri Kisaki (background)

Heiji Hattori

Hiroshi Agasa

Ai Haibara

Kazuha Toyama (background)

Differneces

difficult to read, too many unnecessary elements, outdated styles

<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px;  ">
    <table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
        <tbody>
            <tr>
                <th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
            </tr>
            <tr>
                <td>
                    <table class="char-appearances-table">
                        <tbody>
                            <tr>
                                <td>
                                    <div style="float:left; font-size: 90%;" class="char-image">
                                        <div class="center">
                                            <div class="thumb tnone">
                                                <div class="thumbinner" style="width:102px;">
                                                    <a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
                                                        <img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
                                                    <div class="thumbcaption">
                                                        <a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

less complicated structure, better readability, 66% shorter, more modern styles, achieves same results

<div style="overflow: auto; margin-bottom: 2px;">
    <div style="border: 1px dotted #7BA1EC; width: max-content;">
        <div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
        <div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
            <div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
                <a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
                <a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
            </div>
        </div>
    </div>
</div>