User:Snarglefoop/Tables

See also User:Snarglefoop/Some pages

Scratch page for testing out tables and stuff. I had one of these on Uncy but dear old ZB deleted it after I stopped editing there -- too bad I didn't take the source along before that happened.

Positioned Boxes

See this discussion (if it's not hidden under the dogs): Positioning stuff

Relative positioning -- trick is to put it inside a box with static positioning:

This dog is positioned relative to its position, so to speak. Now is the time for all good dogs to come to the aid of the dog park

snerf in the cheese doodles before the murfles get to them and eat the whole crop!

And once again, this time with fixed positioning -- glued to window

This dog is stuck to the window. How annoying!
Now is the time for all good dogs to come to the aid of the dog park

And once again, this time with absolute positioning -- glued to page

This dog is stuck to the page. Now is the time for all good dogs to come to the aid of the dog park

Tables

See also Wikipedia on tables
See also MediaWiki on tables
See also Meta on tables
See also Wikipedia on advanced table formatting

Table with border, one cell, some padding:

Mice in the first cell

We still want examples of tables with interior borders, tables with styles on rows, tables with a background color. These all should be easy but it's really easy to botch the css, in my experience.

Either || to separate cells or <newline>| work about the same way. Style info goes between the vertical bars.

Mice in the first cell	cats	dogs
takkens	empty
takkens	empty

Same thing with class wikitable which puts in internal borders and stuff

Mice in the first cell	cats	dogs
takkens	empty
takkens	empty

Internal borders without using WikiTable

Can do something similar with cell borders and bordercollapse and the (obsolete) property "border":

Mice in the first cell	cats	dogs
takkens	empty
takkens	empty

You can also put borders on each cell and then depend on border-collapse to merge them. The cells are probably a member of some class or other which could have its css dinked to do that.

And finally a background color on the whole table, using some CSS trickery to put internal borders on the cells; we define the CSS for class td only inside class .snickers, and then wrap the table in a div to put it all in class snickers:

Mice in the first cell	cats	dogs
takkens	empty
takkens	empty

Table with nested table and background colors and stuff

TITLE ON THE TABLE
Comments about the table
Col 1 Col 2 Col 3 Some heading Easy Notes and stuff Another Row and stuff More whatsit Some stuff Last row Insanely difficult Whatever

Just for fun

Ideally this would be a png with most of it transparent.

Apparently z-index doesn't interact with the banana in the corner, which comes out on top regardless. (Or I'm doing it wrong.)

Stupid text tricks

Double struck text:

Now is the time for all good compilation errors to gather in the back garden

Now is the time for all good compilation errors to gather in the back garden

Rainbow text:
This example did not work. It was found here: Rainbowcoding and stuff Modifications found here: w3schools on grandients made it work (at least sort of)
BUT it doesn't work with IE. It clips a rainbow to the shape of the text which is an unsupported extension. Here it is none the less:

Now is the time for all good Russians to come to the aid of the Electoral College and assure that everyone has a sufficiency of old hackable computers for use in bot armies so we don't run out of them in early November which would be a catastrophe.

This version might; it's a lot hairier and actually fills it rather than clipping to it: rainbow color for text
And here are some other weird things you can do with SVGs: Yokesel codepen examples
And some general info on the svg tag and 'fill' property: css-tricks on svg fill

Moon splatter