TABLE | slow horses

[perching]

live code + 1 variant under the cut! (updated 18.04.2025)

TABLE VERSION 1
	CHARACTER NAME — canon — USERNAME LINK1 / LINK2		CHARACTER NAME — canon — USERNAME LINK1 / LINK2
COMPRESSED SECTION
SUBTITLE TEXT. table code by manual.

TABLE VERSION 2
CHARACTER NAME — canon username LINK1 / LINK2	CHARACTER NAME — canon username LINK1 / LINK2	CHARACTER NAME — canon username LINK1 / LINK2	CHARACTER NAME — canon username LINK1 / LINK2
CHARACTER NAME — canon username LINK1 / LINK2	CHARACTER NAME — canon username LINK1 / LINK2	CHARACTER NAME — canon username LINK1 / LINK2	CHARACTER NAME — canon username LINK1 / LINK2

TABLE VERSION 1
<center><raw-code><table width="660" style="font: 0.90em Georgia, serif; line-height: 1.4em; font-variant: small-caps; letter-spacing: 1pt; text-align: left;"> <tr style="font-size:1.6em;"> <!---- SECTION HEADER 1 STARTS HERE ----!> <td colspan="4" style="text-align: right; padding: 14px 0; vertical-align: top;"><br /><b style="font-family: Helvetica, sans-serif; padding: 5px; background: yellow;">TABLE VERSION 1</b></td> </tr> <tr> <!---- CHARACTER BLOCK 1 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>CHARACTER NAME</b></span> <br/>— canon<br/>— <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>USERNAME</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 2 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>CHARACTER NAME</b></span> <br/>— canon<br/>— <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>USERNAME</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> </tr> <!---- SECTION HEADER 2 STARTS HERE ----!> <tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;"><br/><b style="font-family: Helvetica, sans-serif; font-size:1.6em; padding: 5px; background: yellow;">COMPRESSED SECTION</b><br /><br /> <!---- MERGED CHARACTER BLOCK STARTS HERE ----!> <img src="IMGURL" title="CHARACTERNAME (username)" style="width: 80px; border-radius: 50%;"></td></tr> <tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;">SUBTITLE TEXT. table code by <b>manual</b>.<br/></td></tr></table></raw-code></center>


TABLE VERSION 2
<center><raw-code><table width="592" style="font: 0.90em Georgia, serif; line-height: 1.4em; font-variant: small-caps; letter-spacing: 1pt; text-align: left;"> <tr style="font-size:1.6em;"> <!---- SECTION HEADER 1 STARTS HERE ----!> <td colspan="4" style="text-align: right; padding: 14px; vertical-align: top;"><br /><b style="font-family: Helvetica, sans-serif; padding: 5px; background: yellow;">TABLE VERSION 2</b></td> </tr> <!---- ROW 1 STARTS HERE ----!> <tr style="border-bottom: 1px solid #cecece;"> <!---- CHARACTER BLOCK 1 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 2 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 3 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 4 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> </tr> <!---- ROW 2 STARTS HERE ----!> <tr style="border-bottom: 1px solid #cecece;"> <!---- CHARACTER BLOCK 1 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 2 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 3 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> <!---- CHARACTER BLOCK 4 STARTS HERE ----!> <td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"><BR /> <span style="font-size:1.1em;"><b>CHARACTER NAME</b></span><br/> — canon<br/> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;"><b>username</b></a><br/><a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td> </tr> </table></raw-code></center>

CHECK THIS BEFORE YOU START EDITING!




— old code i cleaned up for the hell of it, no pressure
— tested on chrome, not optimised for mobile/responsive
— should be easy to mix and match but if anything's giving you trouble just lmk in the comments!
— border color is #cecece, highlight color is yellow, serif font is Georgia and sans-serif font is Helvetica.

Comments

[boltund]

I'm trying to get the version you have as a screenshot sample but when I try to copy over the table the second one collapses in...I'm not sure I'm doing it right.

[velominati]

i had the same problem, actually, and icr what i changed to get it working (i'm too lazy to compare/contrast rn), but i've c/p'ed my working code below for you — ymmv as i'm not a coder by any means, but i've tested it on firefox, chrome and edge, and it seems to be fine.

fwiw, my post also has disable auto-formatting checked.

<center><raw-code><table width="660" style="font: 0.90em Georgia, serif; line-height: 1.4em; font-variant: small-caps; letter-spacing: 1pt; text-align: left;"> <tr style="font-size:1.6em;"> <!---- SECTION HEADER 1 STARTS HERE ----!> <td colspan="4" style="text-align: right; padding: 14px 0; vertical-align: top;"><br /> <b style="font-family: Helvetica, sans-serif; padding: 5px; background:#e5d8e8;">ACTIVE</b></td> </tr> <tr> <!---- CHARACTER BLOCK 1 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>JOURNAL NAME</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A> / <a href="URL" style="text-decoration: none; color: #000;">LINK</A></td> <!---- CHARACTER BLOCK 2 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>westcoasts</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A> / <a href="URL" style="text-decoration: none; color: #000;">LINK</A></td> </tr> <!---- SECTION HEADER OTHER STARTS HERE ----!> <tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;"><br/><b style="font-family: Helvetica, sans-serif; font-size:1.6em; padding: 5px; background:#e5d8e8;">INACTIVE</b></TD> </tr> <tr> <!---- CHARACTER BLOCK 1 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="https://v.dreamwidth.org/12935774/1865540ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>JOURNAL NAME</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A> / <a href="URL" style="text-decoration: none; color: #000;">LINK</A></td> <!---- CHARACTER BLOCK 2 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>JOURNAL NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>JOURNAL NAME</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A></A></td> </tr> <tr> <!---- CHARACTER BLOCK 3 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>JOURNAL NAME</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A></A></td><BR><BR> <!---- CHARACTER BLOCK 4 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>JOURNAL NAME</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A> / <a href="URL" style="text-decoration: none; color: #000;">LINK</A></td> </tr><tr> <!---- CHARACTER BLOCK 5 STARTS HERE ----!> <td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="ICON" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td> <td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;"><span style="font-size:1.4em;"><b>NAME</b></span> <br/>— CANON<br/>— <a href="URL" style="text-decoration: none; color: #000;"><b>JOURNAL NAME</b></a><br/><a href="URL" style="text-decoration: none; color: #000;">LINK</A></td> </tr> <!---- SECTION HEADER 2 STARTS HERE ----!> <tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;"><br/><b style="font-family: Helvetica, sans-serif; font-size:1.6em; padding: 5px; background:#e5d8e8;">RETIRED/OTHER</b><br /><br /> <!---- MERGED CHARACTER BLOCK STARTS HERE ----!> <img src="URL" title="NAME" style="width: 80px; border-radius: 50%;"> <img src="URL" title="NAME" style="width: 80px; border-radius: 50%;"> <img src="URL" title="NAME" style="width: 80px; border-radius: 50%;"></td></tr> <tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;">table code by <b>manual</b>.<br/></td></tr></table> </raw-code>

[boltund]

Thank you so much! <3

[perching]

Hi! Sorry for the super late reply, but yes, I forgot to mention to make sure auto-formatting is disabled. Updated the post with this info as well, thank you for flagging it!