editor
7,290
edits
Changes
Jump to navigation
Jump to search
m
Table Borders and Spacing
By default, tables are made with no borders, as you saw in Tables: Basic Construction.
This doesn't make it look much like a table now, does it?
Table Borders
To add a simple border, you can add the following code at the table start level:
border="1"
You can change the border width on each side of the table by using the following at the table start level:
style="border-width:10px 40px 80px 0px;"
These define top, right, bottom, and left borders respectively.
If you wish to have the top and bottom have the same border width, as well as the left and right sides to have the same, it is defined by top/bottom and left/right respectively.
style="border-width:10px 40px;"
Table Spacing
You can add some space in your cells by adding cell padding. To do so, add the following code to the table start level:
cellpadding="10"
This will create a 10-pixel margin of space in every direction in your cell.
Table Classes (Styles)
There are some table classes that provide some table formatting for you. They are most commonly used, as it makes it easier to understand and set up.
To add a class to your table, simply add:
class="<classname>"
To the table start level. For example:
{|class="wikitable"
Wikitable
The wikitable class gives a light grey background to cells, and simple table borders.
{|class="wikitable"
!Column 1
!Column 2
!Column 3
|-
|Row 1||Row||Row
|-
|Row 2||Row||Row
|}
Wikitable Sortable
The wikitable sortable class gives the same things as the wikitable class does, but also makes your columns sortable (alphabetically).
{|class="wikitable sortable"
!Column 1
!Column 2
!Column 3
|-
|Row 1||Row||Row
|-
|Row 2||Row||Row
|}
SortableThe sortable class adds the ability to sort columns alphabetically.===Table Borders===
{|class="sortable"
!Column 1
!Column 2
!Column 3
|-
|Row 1||Row||Row
|-
|Row 2||Row||Row
|}
Colour codes can be placed at different levels depending on what you are trying to achieve. In the table I have created above, the whole table is coloured a teal colour, while some other cells are coloured differently. This gives the illusion of a coloured border when a border size is not specified.
Table Borders and Spacing
This doesn't make it look much like a table now, does it? Table BordersTo add a simple border, you can add the following code at the table start level:border="1" You can change the border width on each side of the table by using the following at the table start level:style="border-width:10px 40px 80px 0px;" These define top, right, bottom, and left borders respectively. If you wish to have the top and bottom have the same border width, as well as the left and right sides to have the same, it is defined by top/bottom and left/right respectively.style="border-width:10px 40px;" Table SpacingYou can add some space in your cells by adding cell padding. To do so, add the following code to the table start level:cellpadding="10" This will create a 10-pixel margin of space in every direction in your cell. Table Classes (Styles)There are some table classes that provide some table formatting for you. They are most commonly used, as it makes it easier to understand and set up.To add a class to your table, simply add:class="<classname>" To the table start level. For example:{|class="wikitable" WikitableThe wikitable class gives a light grey background to cells, and simple table borders. {|class="wikitable"!Column 1 !Column 2 !Column 3 |- |Row 1||Row||Row |- |Row 2||Row||Row |} Wikitable SortableThe wikitable sortable class gives the same things as the wikitable class does, but also makes your columns sortable (alphabetically). {|class="wikitable sortable"!Column 1 !Column 2 !Column 3 |- |Row 1||Row||Row |- |Row 2||Row||Row |} SortableThe sortable class adds the ability to sort columns alphabetically. {|class="sortable"!Column 1 !Column 2 !Column 3 |- |Row 1||Row||Row |- |Row 2||Row||Row |} Colour codes can be placed at different levels depending on what you are trying to achieve. In the table I have created above, the whole table is coloured a teal colour, while some other cells are coloured differently. This gives the illusion of a coloured border when a border size is not specified.Table Borders and SpacingBy default, tables are made with no borders, as you saw in Tables: Basic Construction. This doesn't make it look much like a table now, does it? Table BordersTo add a simple border, you can add the following code at the table start level:border="1" You can change the border width on each side of the table by using the following at the table start level:style="border-width:10px 40px 80px 0px;" These define top, right, bottom, and left borders respectively. If you wish to have the top and bottom have the same border width, as well as the left and right sides to have the same, it is defined by top/bottom and left/right respectively.style="border-width:10px 40px;" Table SpacingYou can add some space in your cells by adding cell padding. To do so, add the following code to the table start level:cellpadding="10" This will create a 10-pixel margin of space in every direction in your cell. Table Classes (Styles)There are some table classes that provide some table formatting for you. They are most commonly used, as it makes it easier to understand and set up.To add a class to your table, simply add:class="<classname>" To the table start level. For example:{|class="wikitable" WikitableThe wikitable class gives a light grey background to cells, and simple table borders. {|class="wikitable"!Column 1 !Column 2 !Column 3 |- |Row 1||Row||Row |- |Row 2||Row||Row |} Wikitable SortableThe wikitable sortable class gives the same things as the wikitable class does, but also makes your columns sortable (alphabetically). {|class="wikitable sortable"!Column 1 !Column 2 !Column 3 |- |Row 1||Row||Row |- |Row 2||Row||Row |} SortableThe sortable class adds the ability to sort columns alphabetically. {|class="sortable"!Column 1 !Column 2 !Column 3 |- |Row 1||Row||Row |- |Row 2||Row||Row
Colour codes can be placed at different levels depending on what you are trying to achieve. In the table I have created above, the whole table is coloured a teal colour, while some other cells are coloured differently. This gives the illusion of a coloured border when a border size is not specified.
===Table Borders and Spacing===
By default, tables are made with no borders, as you saw in Tables: Basic Construction.
[[File:Handbook35.png]]
==== Table Borders ====
[[File:Handbook36.png]]{| border="1"|-|Row 1||Row 1||Row 1|-|Row 2||Row 2||Row 2|}
[[File:Handbook37.png]]
[[File:Handbook38.png]] ====Table Spacing====
{|class="wikitable"
!Column 1
!Column 2
!Column 3
|-
|Row 1||Row||Row
|-
|Row 2||Row||Row
|}
Saving changes
<pre>
style="vertical-align:top;"|Row1||
</pre>
===Cell, Row, and Table Sizing===
You can set the size of the table, rows, and cells to a width and height in pixels or percentages of the screen. Percentages are recommended as they will ensure a similar view for any screen size.
'''Example 2: Defining a row's height'''
{| border="1" style="width:75%; height:300px;"
|}
</pre>
<hr>
===Row and Column Spans===
Colour codes can be placed at different levels depending on what you are trying to achieve. In the table I have created above, the whole table is coloured a teal colour, while some other cells are coloured differently. This gives the illusion of a coloured border when a border size is not specified.
By default, tables are made with no borders, as you saw in Tables: Basic Construction.
|}
This doesn't make it look much like a table now, does it?
To add a simple border, you can add the following code at the table start level:
<pre>
</pre>
You can change the border width on each side of the table by using the following at the table start level:
style="border-width:10px 40px 80px 0px;"
</pre>
{| style="border-width:10px 40px 80px 0px;"
|-
|Row 1||Row 1||Row 1
|-
|Row 2||Row 2||Row 2
|}
These define top, right, bottom, and left borders respectively.
If you wish to have the top and bottom have the same border width, as well as the left and right sides to have the same, it is defined by top/bottom and left/right respectively.
style="border-width:10px 40px;"
</pre>
You can add some space in your cells by adding cell padding. To do so, add the following code to the table start level:
<pre>
cellpadding="10"
</pre>
This will create a 10-pixel margin of space in every direction in your cell.
Table Classes (Styles)
There are some table classes that provide some table formatting for you. They are most commonly used, as it makes it easier to understand and set up.
