(lead reshape; CSS classes) |
No edit summary |
||
| Line 32: | Line 32: | ||
But there are cases where you might consider using <tt>.wikitable</tt>, instead. Here's what they both look like on a completely un-customized wiki: |
But there are cases where you might consider using <tt>.wikitable</tt>, instead. Here's what they both look like on a completely un-customized wiki: |
||
<div style="float:left"> |
<div style="float:left"> |
||
| − | [[file:article-table.png|thumb|left|With <tt>.article-table</tt> |
+ | [[file:article-table.png|thumb|left|With <tt>.article-table</tt>]] |
[[file:wikitable.png|thumb|With <tt>.wikitable</tt>]] |
[[file:wikitable.png|thumb|With <tt>.wikitable</tt>]] |
||
</div> |
</div> |
||
Revision as of 01:40, 26 September 2017
If you want to shape tables with wikitext, you have plenty of options. This one page won't go into them all, but it will show you how wikitext matches up to HTML markup, the difference a CSS class makes, and some of the ways manual wikitext coding can result in more intricate tables for your wiki.
Basic table code
| Description | You type |
|---|---|
| Begin table (equivalent to <table>)
|
{|
|
| Begin table row (equivalent to <tr>)
|
|-
|
Table header (part of a row; equivalent to <th>)
|
! or !!
|
Table cell (part of a row; equivalent to <td>)
|
| or ||
|
| End table (equivalent to </table>)
|
|}
|
FANDOM's default CSS classes
Deep within FANDOM's code lie two classes that you can put at the very start of your table. No matter which wiki you're on, there is always some default formatting for .article-table and .wikitable. If you use either the VisualEditor or the classic editor's visual mode, .article-table will be automatically added so that the basic structure of your table will be.
{| class = "article-table"
...
|}
But there are cases where you might consider using .wikitable, instead. Here's what they both look like on a completely un-customized wiki:
Basic tables
| Description | You type | You get | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Simple 1 cell table with a border | {| border="1"
|
| |||||||||
| Simple 2 cell table left header | {| border="1"
|
| |||||||||
| Simple 3 x 3 table | {| border="1"
|
| |||||||||
| Simple 2 x 2 table with 90% width | {| width="90%"
|
| |||||||||
| Simple 2 x 2 table with 16px cell padding HTML5 doesn't support cellpadding= table attribute anymore.
|
{|
|
| |||||||||
| Simple 2 x 2 table with 8px cell spacing | {| cellspacing="8px"
|
|
Cell and header spanning
| Description | You type | You get | ||||||
|---|---|---|---|---|---|---|---|---|
| Simple 2 column table with header spanning both | {|
|
| ||||||
| Simple 2 column table with cell spanning both | {|
|
| ||||||
| Simple 2 row table with cell spanning both | {|
|
| ||||||
Cell, header, or row alignment
| Description | You type | You get | ||||
|---|---|---|---|---|---|---|
| Simple 2 x 2 table with various alignments | {| width="100%"
|
|
Table captions
| Description | You type | You get | ||||
|---|---|---|---|---|---|---|
| Simple 2 x 2 table with a caption | {| width="100%"
|
|
Typical CSS styling
| Description | You type | You get | ||||
|---|---|---|---|---|---|---|
| FANDOM-styled 4 cell table | {| class="article-table"
|
| ||||
| Simple 2 x 2 table with CSS background-color | {| style="background-color:yellow;"
|
| ||||
| Simple 2 x 2 table with various CSS styles | {| style="border:3px inset gray; font-size:80%; width:90%;"
|
|
See also
- Help:Sorting
- Help:Tables
- Help:Wikitext
- Help:Magic words
- MediaWiki help page for tables
- Meta-Wiki help page
Further help and feedback
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article