pagans | TABLE | slow horses

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;"> TABLE VERSION 1</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;">CHARACTER NAME
 — canon — <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">USERNAME</a> <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;">CHARACTER NAME
 — canon — <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">USERNAME</a> <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;"> COMPRESSED SECTION

<!---- 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 manual. </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;"> TABLE VERSION 2</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;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <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;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <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;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <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;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <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;">

</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.

Flat | Top-Level Comments Only

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;"> 
ACTIVE</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;">NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">JOURNAL NAME</a> <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;">NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">westcoasts</a> <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;"> INACTIVE</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;">NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">JOURNAL NAME</a> <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;">JOURNAL NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">JOURNAL NAME</a> <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;">NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">JOURNAL NAME</a> <a href="URL" style="text-decoration: none; color: #000;">LINK</A></A></td>

<!---- 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;">NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">JOURNAL NAME</a> <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;">NAME
 — CANON — <a href="URL" style="text-decoration: none; color: #000;">JOURNAL NAME</a> <a href="URL" style="text-decoration: none; color: #000;">LINK</A></td>
</tr>

<!---- 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 manual. </td></tr></table>

</raw-code>

Thank you so much! <3

TABLE | slow horses

no subject

no subject