Pretty Tables

By CallumMcL

Description

A very pretty table layout that I thought I might share with you all.

Code

[[module CSS]]
#page-content table.pretty{
    border-collapse: collapse;
    border: #8596A9 dashed 2px;
}
#page-content tr,td {
    padding: 10px;
}
#page-content tr.alt{
    background: #8596A9;
    color: #FFFFFF;
    font-weight: bold;
}
[[/module]]

[[table class="pretty"]]
[[row class="alt"]]
[[cell]]
Row 1
[[/cell]]
[[cell]]
Row 1 Description
[[/cell]]
[[/row]]
[[row]]
[[cell]]
Row 2
[[/cell]]
[[cell]]
Row 2 Description
[[/cell]]
[[/row]]
[[/table]]

In Action

Synchronous modification	Documents are edited and uploaded in real-time, so that all collaborators operate within an up-to-date workspace.
Document isolation	Collaborators may edit documents under a two-phase locking system, wherein only one user may modify a document at a time to ensure concurrency.
Peer review	Users are able to rate and review documents within the workspace.
Group chat	The tool provides users with a synchronous messaging system, so that collaborators can exchange ideas and discuss the project in real-time.
Task assignment	The tool gives users the ability to assign tasks, and set a deadline for those tasks.

---

Thanks to tsangk for this great snippet: conditional-blocks

---

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

---

---

Other snippets posted by CallumMcL

Custom Page Title - 29 May 2013 06:04

---

Rate this solution

If you think this solution is useful — rate it up!

Marifer Zapata 23 Mar 2020 21:08

[[module CSS]]
#page-content table.pretty{
border-collapse: collapse;
border: #8596A9 ;
}
#page-content tr,td {
padding: 10px;
}
#page-content tr.alt{
background: #8596A9;
color: #FFFFFF;
font-weight: bold;
}
[[/module]]

Row 1	Row 1 Description
Row 2	Row 2 Description

DrCaduceus 16 May 2014 03:25

This would make a nice place to put announcements. Thanks!

---

Send Message | Regeneration's a lottery.

RobElliott 29 May 2013 07:24

A slightly simpler way to achieve alternate row colors in a table is to use nth-child and you don't then need to specifically apply a class to each alternate row, for example:

table.wiki-content-table tr {
    background-color: #fff;
}
 
table.wiki-content-table tr:nth-child(odd) {
    background-color:#eee;
}

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.