Wikitable Code

Ixnael

clodsire render

description. a transparent image is best, but any works
Sociology
Population 3,012,000,000
Orbital Station Coatl
Orbital Characteristics
Day 23 hrs.
Axis Tilt 1/360th
Size 4/5ths Terra
Year 343 days
Atmosphere Habitable
Gravity 9.977 m/s²
Geography and Climate
Dominant Climate
SPOILERS
  • tropical
  • subtropical
Equatorial Temprature 88F
Polar Temprature 75F
Superscript Citation1
Subscript Name1
"mountain dew game fuel"

This responsive base template is supposed to mimic sites like Fandom, without the bloat, for personal projects. It uses a floating table that clears everything after it so it doesn't overflow onto other elements. This code uses only HTML and CSS, even for its dropdowns.

Get the HTML here or rip it from this page. Get the CSS here. Want something more complete and MediaWiki inspired? check out squid's Pedia, which I used alongside wikitable in the example!

You can also tip me on Ko-fi!

Show Content
  • 1. Wikitable Code
  • 2. Other Features
    • 2.1 Part of a Series On
    • 2.1 Flair

8/5/2024: If you use this free template I ask you to donate to a Palestinian fundraiser. PCRF - List of Vetted Fundraisers by Project Watermelon - Crips for Esims for Gaza

2/8/24: Added CSS root properties. Change the colors of the CSS in one convenient place.

9/22/23: Wow! This got more popular than I expected! I've seen some question in the tags, so here's some general things about this template. First off, it's static. This means you won't be able to edit it as you would a fandom wiki, you'll have to go into the HTML. You also can't import a wiki directly, since this doesn't use mediawiki. If you want to have a community for an existing media with dynamic editing instead of doing most of it yourself (this template is mostly targeted towards personal projects,) I'd recommend getting an actual wikifarm such as Miraheze. It's free, and if you run a fandom, you can request a direct dump!

Other Features

Here are some fun extras I wanted to include:

Part of a Series Of...

A Series Of People

person • this page • personperson

Those list boxes from wiki. To center it for use in the footer, use margin: auto in the CSS.

Header Flair

The top of this page has a header flair that uses id="flair" to place an image or unicode character ::before.

Citations

  1. Superscript can help you have a list of real (or fake!) citations.
/*wikitable by @limegreen on neocities. a link is appreciated!*/ /*to change the fonts here, go to google fonts, find ones you'd like, and use the @import snippet*/ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700'); /*example styles*/ /*global colors. change here to see the effect*/ :root { --backgroundcolor: grey; --textcolor: #2b2b2b; --header:#969696; --main: white; --footer: #eaecf0; --borders: #454545; /*links*/ --link: blue; --linkhover: purple; /*headings*/ --breadcrumb: grey; --h1: #2b2b2b; --h2: #2b2b2b; --h3: #2b2b2b; --headerunderline: grey; /*boxes*/ --quotebackground:grey; --quotetext: #2b2b2b; --boxbg: #bfbfbf; --showcontentborder:grey; --seriesofbg:#bfbfbf; --seriesoftext:#2b2b2b; /*infotable*/ --infoboxbg:#eaecf0; --centertext:#bdbdbd; --boldtext:#2b2b2b; --infotext:#2b2b2b; } body{ background-color: var(--backgroundcolor); font-family:Atkinson Hyperlegible; font-size: 15.5px; margin: 0; color: var(--textcolor); } /*container*/ .wrapper{ min-height: 100vh; margin: auto; /*width of the content*/ width: 85%; margin: auto; border:2px solid var(--borders); margin-top: 15px; margin-bottom: 15px; } /*main content*/ main{ padding: 15px; background: var(--main); min-height: 100vh; clear: left; } /*links*/ a{ color: var(--link); } /*link hover*/ a:hover{ text-shadow: 0 0 1px ; color: var(--linkhover); text-decoration: underline; } /*breadcrumbs*/ .breadcrumb{ color: var(--breadcrumb); } header{ height: 100px; border-bottom:2px solid var(--borders); background:var(--header); } /*prevent image overflow*/ main img{ max-width: 100%; } /*footer*/ footer{ background:var(--footer); padding: 35px; border-top:2px solid var(--borders); text-align: center; } /*headers*/ h1,h2,h3{ overflow: hidden; border-bottom: 2px solid var(--headerunderline); } h2{ font-size: 19pt; } h3{ font-size: 16pt; } /*table of contents*/ .showcontent{ padding: 3px; font-weight: bold; } .contents{ background-color:var(--boxbg); width: 14%; padding: 7px; border: 2px solid var(--showcontentborder); } /*this changes the dropdown to a hamburger menu for desktop screens*/ .toc summary { list-style-type: '☰ '; } .toc ul{ list-style: none; margin-left: -30px; } /*quotes*/ .quotebox{ width: 30%; background-size: cover; font-style: italic; padding: 10px; padding: 13px; border-left: solid; background-color:var(--quotebackground); color: var(--quotetext); } /*series of*/ .revealsummary{ text-align: center; background-color:var(--seriesofbg); padding: 10px; font-weight: bold; border: 2px solid var(--showcontentborder); } .reveal{ text-align: center; background-color:var(--seriesofbg); padding: 5px; width: 50%; border: 2px solid var(--showcontentborder); color: var(--seriesoftext); } /*flair*/ #flair::before { background-size: cover; background-size: 25px 25px; display: inline-block; width: 30px; height: 20px; margin-left: 4px; content:"⚶"; } /*flair with image- delete above if using. you will need to play with the width and height to make it fit properly*/ /* #flair::before { background-image: url('https://i.ibb.co/SwkXQjP/itsalime.png'); background-size: cover; background-size: 20px 25px; display: inline-block; width: 20px; height: 20px; margin-left: 4px; content:" "; }*/ /*infotable*/ .infotable { float:right; margin-left:5px; background:var(--infoboxbg); border-left:2px solid var(--borders); border:2px solid var(--borders); width:21%; font-size: 14px; color: var(--infotext); } .infotable img{ max-width: 100%; margin: auto; } .infotable th { text-align:left; } .infotable th{ padding: 5px; color: black; } .infotable ul{ list-style: none; padding: 0px; margin: 4px; } #centertext{ text-align: center; background: var(--centertext); } /*clear float after infobox*/ #clear::after { content: ""; clear: both; display: table; } /*responsiveness*/ /*narrow*/ @media(max-width: 900px) { .infotable{ width: 30%; } .wrapper{ width: 100%; } .chapters{ width: 50%; } .reveal{ width: 60%; } } /*medium*/ @media(max-width: 1250px) { .infotable{ width: 35%; } .contents{ width: 40%; } } /*mobile */ @media(orientation: portrait) { .quotebox{ width: 90%; margin: auto; padding: 15px; margin-top: 10px; } body{ margin-top: 0px; } .infotable{ width: 100%; margin-bottom: 20px; } .wrapper{ width: 95%; } .chapters{ width: 50%; } .main{ padding-top: 20px; } .contents{ width: 95%; } .reveal{ width: 95%; } }