View source for User:R0o0di/Sandbox

== old==
{{Char Appearances|
{{char|Conan Edogawa}}
{{char|Ran Mouri}}
{{char|Kogoro Mouri}}
{{char|Eri Kisaki|display=Eri Kisaki (background)}}
{{char|Heiji Hattori}}
{{char|Hiroshi Agasa}}
{{char|Ai Haibara}}
{{char|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}

== new ==
{{User:R0o0di/Sandbox/CharAppearances2|
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
{{User:R0o0di/Sandbox/Char2|Ran Mouri}}
{{User:R0o0di/Sandbox/Char2|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Char2|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Char2|Heiji Hattori}}
{{User:R0o0di/Sandbox/Char2|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Char2|Ai Haibara}}
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}

== Differneces ==
<h4>difficult to read, too many unnecessary elements, outdated styles</h4>
<div style="overflow:auto;">
<pre style="width:max-content">
<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>
</pre>
</div>


<h4>less complicated structure, better readability, 66% shorter, more modern styles, achieves same results </h4>
<div style="overflow:auto;">
<pre style="width:max-content">
<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>
</pre>
</div>