Tables

Tables are one of the most effective and widely used tools for organizing data. Tables make it easy for your users to organize key information—like comparisons between product models and lists of your most frequently used tools. For now, tables can only be created on Wiki pages and the guide instruction and summary fields. Tables are entirely syntax driven. If you’d like to create a table, you’ll have to learn a bit of Dozuki’s Wiki syntax—a unique set of code used on Dozuki sites.

To create your table, type an opening brace "{" directly followed by the word “table” and then a closing brace "}".

What you type should look like this:

{table
}

All syntax—and your table’s content—is written between this syntax.

Once you have created a table, the next step is to set the desired width. The table can only span the area that the text would go. To specify how much of the available space you want your table taking up, add a vertical pipe “I” followed by “width” and an equal sign”=” on the line below “{table”. After the equal sign “=”, insert the percentage of the width of the page that you would like the table to span.

Here is a table that uses 50% of the width of the available space:

{table
|width=50%
}

To create the first row of your table, add a vertical pipe “|” underneath the line where you indicated your desired table width. Continue adding vertical pipes in order to indicate the number of columns you want in each row.

Here is an example of what the code for creating rows looks like:

{table
|width=50%
|
|
|
}

A table created using the syntax above would look like this:

To add titles to the top of each column, simply type an exclamation mark “!” to the right of each vertical pipe that indicates your desired number of columns. Type in your desired title.

Here is an example of a table with one row, three columns, and a title for each column:

{table
|width=50%
|! Title 1
|! Title 2
|! Title 3
}

Your first row is automatically created when columns are set up, but you must create every row thereafter. To add a row to your table, add a pipe with two dashes ‘’’|--” to the row beneath your previous row.

Then add the same number of vertical pipes ‘’’|’’’ as you have columns on lines below the vertical pipe with two dashes ‘’’|--’’’.

{table
|width=50%
|format=30%l:r:c
|! Title 1
|! Title 2
|! Title 3
|--
|
|
|
}

If you were to type in that code, the following would display:

To add information to cells, type whatever content you want to appear into each cell after the vertical pipe “|”. The cells are in order as they will appear on the table. The first vertical pipe “|” after the beginning of the new row “|--” is the leftmost cell; and the last vertical pipe “|” is the rightmost cell.

Text in a cell is automatically aligned left, but you can change that with Dozuki syntax.

To start, you need to indicate the desired width of your first column. Insert a vertical pipe “|” followed by “format=” and then your desired column width percentage to the line below where you set the width of the entire table. We recommend a width of 30%. Note that the width you set for the first column will affect all other columns.

Here is an example of a table with the first column’s width set to 30%:

{table
|width=50%
|format=30%
|! Title 1
|! Title 2
|! Title 3
}

This is the table that the above syntax would create:

Once the width of the first column is set, you can specify text alignment within each column. Text alignment is determined on a column-by-column basis.

First, find where you formatted the width of the first column—it should look like “‘|format=’” and the width percentage. Following the width percentage, specify text alignment by adding ‘’’l’’’ for left, ‘’’r’’’ for right, or ‘’’c’’’ for center. These letters, which correspond with what direction the text will be aligned, are separated by a colon ‘“:’” for each column.

For example, if you have a table with three columns, and you want the first column aligned left, the second column aligned center, and the third column aligned right, you would type in ‘’’l:c:r’’’ after where you set the width of the first column.

{table
|width=50%
|format=30%l:c:r
|! Title 1
|! Title 2
|! Title 3
}

If you used the syntax above, the table would appear as follows:

You can also format the alignment of the text within the cells - top (default), center or bottom. Following the column alignment letters, specify cell alignment by adding ‘’’m’’’ for middle or ‘’’b’’’ for bottom immediately after the column alignment and before the colon.

For example, if you have a table with three columns, and you want the first column's cell contents aligned left and top, the second column's cells aligned center and middle, and the third column's cells aligned right and bottom, you would type in ‘’’l:rm:cb’’’ after where you set the width of the first column.

Here is an example of a table with various column widths and cell alignment:

{table
|width=100%
|format=30%l:50%rm:cb
|! Title 1
|! Title 2
|! Title 3
}

Sometimes information that needs to be displayed will take up more than one column’s worth of space. This is why our cells have the ability to span the length of more than one column. To do this, go to the vertical pipe that signifies where the cell begins and type in ‘’’<<colspan=”number of columns”>>’’. Replace “number of columns” with however many columns you want the cell to spread across.

Here is an example of a table with a cell that spans across two columns.

{table
|width=50%
|format=30%l:r:c
|! Title 1
|! Title 2
|! Title 3
|--
| <<colspan="2">>
|
}

If you were to use the above syntax, the table would appear like this:

You can also format a cell in one column to span multiple rows using the same principles and ‘’’<<rowspan=”number of rows”>>’’. Replace “number of rows” with however many rows you want the cell to span.

Here is an example of a table with various column and row span formatting:

{table
|width=100%
|format=15%cm:cm:cm:cm
| <<rowspan="2">>
|! <<colspan="3">> Recycling Parts
|--
|! Criteria
|
|! Action
|--
|! Top Plastic Cover
| All pump tops
|
| Place in plastics recycling bin
|--
|! Bottom Plastic Cover
| All pump bottoms
|
| Place in plastics recycling bin
|--
|! <<rowspan="2">> Container/Box
| <<rowspan="2">> Is it cardboard or paper?
| Y
| Place in paper recycling bin
|--
| N
| Place in trash bin
}

Want the text within your cells to be bold? No problem. You can format the text in cells using the same text formatting outlined in our Wiki Formatting & Syntax page or make the words within a cell a link by using the same link syntax outlined in the Wiki Formatting & Syntax page.

You can format the cells background color and the text color of each cell using the following code.

| <<bgcolor="#f00" color="#fff">> Cell contents

In this code, bgcolor represents the cell background color and color represents the font color. You can use any X11 Web Color Name Codes in place of the "#fff" to specify the text or background colors.

Example Table:

{table
|width=100%
|format=15%cm:cm:cm:cm
| <<rowspan="2">>
|! <<colspan="3">> Recycling Parts
|--
|! <<bgcolor="#9ACD32" color="#000080">> Criteria
|
|! <<bgcolor="#F0E68C" color="#FF4500">> Action
|--
|! Top Plastic Cover
| All pump tops
|
| Place in plastics recycling bin
|--
|! Bottom Plastic Cover
| All pump bottoms
|
| Place in plastics recycling bin
|--
|! <<rowspan="2">> Container/Box
| <<rowspan="2">> Is it cardboard or paper?
| <<color="#008000">> Y
| Place in paper recycling bin
|--
| <<color="#FF4500">> N
| Place in trash bin
}

Go back to the Help Index