Isok's Guide to Tables

Introduction

Welcome to the beginner's guide to creating Wiki tables! Please remember that even though this is a "starting point" tables can get very complex and even this guide might confuse you - apologies if that's the case. In this guide, we will explore the fundamentals of creating tables on a Wiki platform. Tables are a powerful way to present structured information in an organized and easily digestible format. Whether you're a Wikipedia contributor or simply interested in enhancing your knowledge of wiki formatting, this guide will provide you with the essential knowledge to create tables effectively.

Within this guide, we will cover the basic concepts of creating tables, including the required codes, understanding borders, manipulating rows and columns, and how to add inline CSS to customize the appearance of your tables. By the end, you'll be equipped with the skills to create tables that enhance the readability and visual appeal of your content.

What is a table?

A wiki table is a structured representation of information organized in rows and columns within a wiki page. It is a powerful tool for presenting data in a clear, organized, and easily understandable format. Just like tables in a spreadsheet or a database, wiki tables allow you to categorize and display data in a tabular form.

Wiki tables are commonly used in various contexts, articles, documentation, collaborative platforms, and knowledge bases. They provide a convenient way to present information in a structured layout, including numerical data, lists, comparisons, schedules, and more.

A basic wiki table

Here's what a basic wiki markup table might look like:

This is a basic table
Row 2: Column 1	Row 2: Column 2	Row 2: Column 3
	Row 3: Column 2	Row 3: Column 3

And here is the code for the above basic table (without css or extras):

{|
|-
| This is a basic table
|-
| Row 2: Column 1
| Row 2: Column 2
| Row 2: Column 3
|-
| Row 3: Column 2
| Row 3: Column 3
|-
|}

An analysis of table components

In this section, we will provide a concise explanation of wiki tables, beginning with the basic components: the start and end. Let's begin by understanding how to initiate and close a wiki table. To create a table in Wikipedia, use a pair of curly brackets and a pipe symbol to indicate the start. Then, use another pipe symbol followed by a closing pair of curly brackets to denote the end. Everything between these markers serves as the container for your table data.

{|

|}

The next symbol to discuss serves a dual purpose in Wikipedia. It acts as both the start and end of a row simultaneously. Using it once accomplishes both tasks. However, for a fully functional table, you will need to begin a row with a pipe followed by a dash and end it with another set. The content between these symbols is considered a row and will align cells horizontally, appearing side by side.

|-

Lastly, the pipe symbol in a wiki table represents a single cell within a row. The content placed to the right of a pipe will be displayed specifically within that particular section of the table. In essence, you can have as many table cells within a row as needed. It's important to note that a table cell also corresponds to a column, aligning vertically.

|

Here's the code again, hopefully clarified:

{|     ←- Starts a table
|-     ←– Starts a row
| This is a cell     ←- This is one cell within the row.
|-     ←– ends above row and allows another to start.
| Row 2: Column 1      (Cell 1)
| Row 2: Column 2     (Cell 2 in row 2)
| Row 2: Column 3.     (Cell 3 row 2)
|-      ←– Ends row. Allows a new one to start.
| Row 3: Column 2     ←– Same patterns as above
| Row 3: Column 3     ←– Same patterns as above
|-     ←– Ends the row
|}     ←–Ends the table

Table coding

If you've been following along, you'll notice that all of the examples provided might appear unusual to you, but there are specific reasons for that. In this section, we will introduce a variety of wiki markup techniques that you can utilize to enhance your table-building skills. These techniques will allow you to expand and customize your tables according to your needs and preferences.

Borders

The table created thus far does not have any borders defined. This is because we have not included any instructions for borders in our current guide. To define borders, you can utilize simple wiki markup techniques:

border="1"

To implement the wiki markup for table borders, you need to add it on the same line that initiates the entire table. Here's an example:

{| border="1"

By including the border="1" attribute within the opening table tag, you will enable the display of borders around the table and its cells. In short, the above starts a new table and defines the border at 1 pixel wide; this can be changed to whatever width you prefer. With the rest of the table code, it should look like:

{| border="1"
|-
| This is a basic table
|-
| Row 2: Column 1
| Row 2: Column 2
| Row 2: Column 3
|-
| Row 3: Column 2
| Row 3: Column 3
|-
|}


Here is what the that code looks like when displayed:

This is a basic table
Row 2: Column 1	Row 2: Column 2	Row 2: Column 3
Row 3: Column 2	Row 3: Column 3

Now if we use this table all of the borders will be defined. And the only thing that will be off putting is our table header/title which reads "This is a basic table" and a couple of cells that contain no information. Wiki auto created these blank cells to make the table uniform. Let's alter our code now to get rid of those blank areas.

Colspan

If you have tested the previous code, you may have noticed an issue with the width of the area we used as a title or header. It appears narrower compared to the rest of the table as it only fills one cell. We can change this by utilizing wiki markup called "colspan" (short for "column span").

To apply colspan, you need to declare it within a specific row, preceding the pipe symbol you want to alter.

Example: colspan="3"

In the given example, we are using the number three since the table has three cells at its widest point (also called columns). As we introduce custom codes for each row, we will need to place the code between its own set of "pipes" to indicate the markup. The table reads it as affecting the text to the right. Here's how our example code should look once the changes are implemented:

{| border="1"
|-
| colspan="3" |This is a basic table
|-
| Row 2: Column 1
| Row 2: Column 2
| Row 2: Column 3
|-
| Row 3: Column 2
| Row 3: Column 3
|-
|}


Here's what it looks like when visually displayed:

This is a basic table
Row 2: Column 1	Row 2: Column 2	Row 2: Column 3
Row 3: Column 2	Row 3: Column 3

Using the above example will make our title cell as wide as the rest of our table. But something else seems off with our formatting.

Rowspan

Similar to colspan, you can adjust the size of a single cell vertically using the "rowspan" attribute instead of horizontally. We will follow the same principle as before and modify the cell in row 2, column 1 to extend downwards into the third row, effectively increasing its height to 2 cells. This adjustment will create a uniform rectangular shape for our table. Most tables will not require this function as tables usually have an equal amount of cells in their rows. For the purpose of this guide, we made sure row 3 only had 2 cells.

To achieve this, add the following code before the pipe symbol in the respective row:

Example: rowspan="2"

Once again, we will have to place this between pipes to indicate the code. Using this will make row two of column one extend down into row three, effectively adding column one to that row. Let's incorporate rowspan into our example table, resulting in the following markup:

{| border="1"
|-
| colspan="3" |This is a basic table
|-
| rowspan="2" | Row 2: Column 1
| Row 2: Column 2
| Row 2: Column 3
|-
| Row 3: Column 2
| Row 3: Column 3
|-
|}

Try the above code out now and be sure it looks like the one below.

This is a basic table
Row 2: Column 1	Row 2: Column 2	Row 2: Column 3
	Row 3: Column 2	Row 3: Column 3

Inline styling

In addition to colspan and rowspan, you can also modify the appearance of a table using inline CSS styling. Following the same syntax as colspan and rowspan, you can apply styling to an individual cell by placing the code between pipes before the text you would like to affect. However, if you are styling a cell that is already defined by a colspan or rowspan, you do not need to add another set. Make sure to include the styling code on the same line as the cell you wish to modify.

To center the text in our title cell, we can use basic CSS with the following code:

Example: style="text-align: center;"

Let's see how it looks when added to our previous example title of our table (remember colspan is there so the code for this line has already been declared):

{| border="1"
|-
| colspan="3" style="text-align: center;" |This is a basic table
|-
| rowspan="2" | Row 2: Column 1
| Row 2: Column 2
| Row 2: Column 3
|-
| Row 3: Column 2
| Row 3: Column 3
|-
|}

This is a basic table
Row 2: Column 1	Row 2: Column 2	Row 2: Column 3
	Row 3: Column 2	Row 3: Column 3

By using inline CSS, you have the freedom to customize each table cell according to your preferences. Simply string together your inline CSS attributes as shown. In our final example, we will add a background color to our title cell. Let's proceed with that:

To add a background color, we can use the following CSS code:

Example: style="background-color: #yourcolor;"

Replace "#yourcolor" with the desired color value or name. Now, let's incorporate this into our previous example table and see the result. For this example we will use the color code #add8e6 and include it in a string with text align center.

If you've been following along, this is what your final code should look like:

{| border="1"
|-
| colspan="3" style="text-align: center; background-color: #add8e6;" |This is a basic table
|-
| rowspan="2" | Row 2: Column 1
| Row 2: Column 2
| Row 2: Column 3
|-
| Row 3: Column 2
| Row 3: Column 3
|-
|}


Here's what the table will look like displayed now:

This is a basic table
Row 2: Column 1	Row 2: Column 2	Row 2: Column 3
	Row 3: Column 2	Row 3: Column 3

Each cell within a table can be customized using your own codes and inline styling techniques. If you're feeling adventurous and want to further enhance the visual appearance of your table, you can incorporate additional inline styles following the examples provided here. Feel free to experiment with various CSS properties and values to achieve the desired effects. The possibilities for customization are extensive, allowing you to create visually stunning and uniquely styled tables to suit your specific needs.

Conclusion

Building a basic table using this guide is a great way to get started and gain familiarity with wiki table crafting. While the structure of a simple table is relatively straightforward, it can become increasingly complex and intricate as you incorporate more wiki markup and inline styling. I encourage you to experiment and explore the possibilities to create tables that suit your specific needs. Practice and experimentation will help you develop your table-building skills and allow you to create tables that are both visually appealing and functionally effective. Lastly, there's still a lot left to learn about wiki tables - plenty of different codes which I have not explained.

Have fun table crafting!