Tables-Talk

table.simpletable class missed in pmwiki.css

table.simpletable class presents only in /pmwiki-responsive/skin.css, but not in pmwiki.css as expected. Is it OK? Finar May 21, 2020, at 12:18 PM

Added for 2.2.129. --Petko May 21, 2020, at 02:42 PM

HTML5 Validation

Tables, which include "width=100%" or similar do not validate in HTML5, because the width-tag is no longer allowed. You can use a class "width-100" instead and define such a class in css. But this is no solution for a lot of old pages and is not compatible with PmWiki's documentation. Is there any way to make "width=x%" directly html5-compatible? [Siegfried 2018-11-20]

There is currently no way for the core to automatically convert the valid HTML4 attributes to HTML5+CSS. A cookbook recipe may, and should, try to implement this. Concerning the PmWiki documentation, there are a limited number of pages and they can be updated. Concerning other websites, if the validation is a requirement, either don't use HTML4 attributes with a HTML5 skin, or use a XHTML4-Transitional skin where these are valid. BTW, I don't believe anyone should use such table attributes in wiki markup: for the tables to be nice and look consistently through a website, they should only have one css classname, or a default style. --Petko November 21, 2018, at 11:28 AM

Other examples

Here's some pretty-fication:

border color, background image for cells, cell padding and width
|| border=5 bordercolorlight=blue bordercolordark=red align=center cellpadding=22px cellwidth=175px style='background-image:url([=http://your-domain.com/backgrounds/computer-backgrounds/014.gif=])'
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||
cell 1cell 2cell 3
left-alignedcenteredright-aligned
A more complex table
%define=sp padding-right:1em font-weight:bold%
|| border=1
|| [++Events Calendar++] ||||||||||
|| '''May 2005''' || '''June 2005''' || '''July 2005''' || '''August 2005''' || '''September 2005''' ||
||%sp%'''10'''%%6:30 - 8:30 Big Meeting\\\
%sp%'''17'''%%7:00 - 8:30 Bigger Meeting\\\
%sp%'''24'''%%7:00 - 8:30 Biggest Meeting|| || || || ||
|| '''October 2005''' || '''November 2005''' || '''December 2005''' || '''January 2006''' || '''February 2006''' ||
|| || || || || ||
Events Calendar
May 2005June 2005July 2005August 2005September 2005
106:30 - 8:30 Big Meeting

177:00 - 8:30 Bigger Meeting

247:00 - 8:30 Biggest Meeting
    
October 2005November 2005December 2005January 2006February 2006
     

How do I specify that a cell spans 2 or more rows in a simple table?

See Cookbook:Rowspan in simple tables

How do I lay out a simple table so that a later editor can see the scope of a rowspan?

See Cookbook:Rowspan in simple tables

How do I lay out a simple table so that a later editor can see the scope of a colspan?

See Cookbook:Rowspan in simple tables

Is there a simple way to change the table defaults? I prefer a border and I'm tired of adding it to every table.

???


The Tables page does not validate because the value of the align attribute of the caption tag may not be "center".

JL December 05, 2010, at 06:39 PM

Thanks, will be fixed for the next release. (It validated before, it seems that the W3C_Validator was upgraded recently and it now finds this error.) --Petko December 05, 2010, at 07:56 PM

I need to insert a long program code in a wiki page: how can I create a scrolling-text window?

Use the CSS style overflow:auto; to the containing div block or table. Try this div:

  • test 1
  • test 2
  • test 3
  • test 4
  • test 5
    • test 5.1
    • test 5.2
    • test 5.3
  • test 6
    • test 6.1
      • test 6.1.1
      • test 6.1.2
    • test 6.2
  • test 7
# Here's a piece of code
function foo($msg)
{
   if ($msg == "Hello, World!")
      echo "That is such a lame message!<br>\n";
   else
      echo "Ooh, a creative programmer, are you?<br>\n";
   return true;
}

I am experimenting with an unusual table application. The Table is very large with cell borders set to 0 at the Table level. However, I do

want borders on specific cells, some some thin and some thick, how do I specify that. I have tried many style options but none generate borders. Secondly, the size of the table is such that even on a wide monitor there is not enough width and it is several hundred rows long, like the previous question I need scroll bars but the <div> container does not seem to work with tables. Any assistance appreciated R.S. New Zealand 30 July 2021 p.s. I have solved the scroll bar issue. Use the <div> container as above but specify a table width greater than 100%. The container has to determine the need for a horizontal scroll bar from the table definition, i.e before any cells are defined, you cannot rely on the sum of the defined column widths to determine an absolute table width. The need for a Vertical scroll bar seems to be determined from the table row count. RS

If it is an advanced table, you can set the borders in a style="border: 3px solid gray;" attribute. If it is a simple table, it can be done with CSS pseudo-classes like :nth-child() but this is a lot of work. For example:

|| class=mytable
||! m  ||!Geographic zone     ||!Highest point     ||!Country  ||
|| 3700||Arctic               ||Gunnbjørn Fjeld    ||Greenland ||
|| 8848||North Temperate Zone ||Mount Everest      ||Nepal     ||
|| 5790||North Tropical Zone  ||Cayambe            ||Ecuador   ||
|| 6768||South Tropical Zone  ||Huáscarán          ||Peru      ||
|| 6960||South Temperate Zone ||Aconcagua          ||Argentina ||
|| 4892||Antarctic            ||Mount Vinson       ||(none)    ||
mGeographic zoneHighest pointCountry
3700ArcticGunnbjørn FjeldGreenland
8848North Temperate ZoneMount EverestNepal
5790North Tropical ZoneCayambeEcuador
6768South Tropical ZoneHuáscaránPeru
6960South Temperate ZoneAconcaguaArgentina
4892AntarcticMount Vinson(none)

Then in my CSS I have something like this:

/* thick border around Everest (3rd row, 3rd column) */
table.mytable tr:nth-child(3) td:nth-child(3) {
  border: 3px solid green;
  background-color: yellow;
}

/* thin dashed border around Argentina (6th row, 4th column) */
table.mytable tr:nth-child(6) td:nth-child(4) {
  border: 2px dashed red;
}

I'd recommend enabling Cookbook:LocalCSS to make it easier to configure. However, this will not work with sortable/filterable tables, and will be difficult to maintain if you edit your table (inserting rows).

If you only need borders in a specific place, say the first/last column or row, you can use :first-child or :last-child in the CSS, this will make it more maintainable.

Finally, if you could do with one kind of bordered cells, you can make those heading cells (with "!") and only style those with CSS:

|| class=myothertable
||'''m'''||'''Geographic zone'''||'''Highest point'''||'''Country'''||
|| 3700||Arctic               ||Gunnbjørn Fjeld    ||Greenland  ||
|| 8848||North Temperate Zone ||!Mount Everest     ||Nepal      ||
|| 5790||North Tropical Zone  ||Cayambe            ||Ecuador    ||
|| 6768||South Tropical Zone  ||Huáscarán          ||Peru       ||
|| 6960||South Temperate Zone ||Aconcagua          ||!Argentina ||
|| 4892||Antarctic            ||Mount Vinson       ||(none)     ||
mGeographic zoneHighest pointCountry
3700ArcticGunnbjørn FjeldGreenland
8848North Temperate ZoneMount EverestNepal
5790North Tropical ZoneCayambeEcuador
6768South Tropical ZoneHuáscaránPeru
6960South Temperate ZoneAconcaguaArgentina
4892AntarcticMount Vinson(none)

Note how Everest and Argentina start with "!", but not the cells in the first row. This is the CSS:

table.myothertable th {
  border: 4px solid blue;
}

Good luck. --Petko July 30, 2021, at 04:15 PM

Thanks for the prompt response Petko but I cannot get it to work. Being my first attempt at a wiki I thought I would tackle the complex table first as it forms the heart of what I want to present. I should have said I was using advanced markup and I am assuming a skin will not affect things. my line of code is (:cell colspan=2 style="border: 5px Black;" bgcolor=#00b0f0:) %color=Black%[[Nelson Section]]

All aspect work as expected in the various combinations I am using them except the borders.I sometimes need a full border, other times individual borders. RS July 31, 2021 at 02:48 PM

In Advanced tables, it should be possible to use either style or class to define table borders:

(:table border=0 class=myadvancedtable:)
(:cell:) a1
(:cell colspan=2 class=thickborder:) thick border
(:cell:) d1
(:cellnr class=thinborder:) thin border
(:cell:) b2
(:cell:) c2
(:cell style="border: 2px dotted green; background-color:yellow;":) dotted green border
(:tableend:)
a1 thick border d1
thin border b2 c2 dotted green border

The green dotted border is defined in the cell directive, the others are CSS classes.

I have the following CSS defining the classes thickborder and thinborder:

table.myadvancedtable td.thickborder {
  border: 4px solid black;
  background-color: #00b0f0;
}
table.myadvancedtable td.thinborder {
  border: 1px solid red;
}

This code can be added to a file pub/css/local.css or if you enable Cookbook:LocalCSS, to a wiki page Site.LocalCSS. CSS classes may be better, because they allow you to easily reuse the same styles across several cells or (re)define them in one place for all cells. --Petko July 31, 2021, at 03:26 AM

Thanks again Petko. I had been thinking of moving to CSS Classes but was not sure how to proceed, the concise notes should help there. In the meantime I finally tracked my problem with the Styles down to not including a 'line type' for the Border attributes. I only had black instead of solid black. I will proceed and see how it handles a very large table, create the Info pages and set up the Trails. All good learning. -- RS July 31, 2021, at 9:13 PM

I have now got all the issues of creating my large special table resolved but it has the annoying feature of always sending you back to the top left corner when you return to the table from a link. Is there a way to record and set the slider values in PMWiki? Obviously you can in HTML but it looks to me like that detail of coding is not brought through to PMWiki. Any thought appreciated. Robert Aug 10, 2021 at 9:55PM

Sorry, I don't know a ready-to-use way to get a link to make the table scroll to its previous location. It may be possible to place anchors inside the table cells (bottom right of the cell), then have the link point to the anchor. See for example: this link ScrollTable#anchor will scroll the table so the red cell containing the anchor [[#anchor]] is in the viewport. --Petko August 10, 2021, at 12:29 PM

This is a talk page for improving PmWiki.Tables.