Comments for page "Layout With Tables"

(no title)

Mon, 12 Oct 2009 03:26:20 +0000

No problem. Sorry I couldn't reply sooner - the grandkids had me running around all day. Exhausting!

Re:

Mon, 12 Oct 2009 03:01:26 +0000

The cell class solution works absolutely perfectly! Thank you so much! I really appreciate both the help and the patience. ^^

(no title)

Mon, 12 Oct 2009 02:44:19 +0000

But if I were to use complex for this table (or at least this row/cell), what would be the code to use to reference the default "header" cell setting I already have set for my tables?

You could add some classes to your custom CSS that matches what you have already laid out for the simple tables (.wiki-content-table). Then, you just apply the custom class to complex tables so the styles are applied:

 /* My Table Class */ .my-table { color: #fcd7f4; border-collapse: collapse; border-spacing: 0; border-color: #cd568c; border-style: double; margin: 0.5em auto; background-color: #7f5a80; } .my-th { border: 1px solid #cd568c; padding: 0.3em 0.7em; background-color: #ffcbe7; color: #370f3d; } .my-td { border: 1px solid #cd568c; padding: 0.3em 0.7em; }

Then you use it like this on your pages (note that you can combine style and class):

 [[table class="my-table" style="float:right; width: 250px;"]] [[row]] [[cell class="my-th"]] Sample Header Cell 1 [[/cell]] [[cell class="my-td"]] sample normal content 1 [[/cell]] [[/row]] [[row]] [[cell class="my-th"]] Sample Header Cell 2 [[/cell]] [[cell class="my-td"]] sample normal content 2 [[/cell]] [[/row]] [[/table]]

Sample Header Cell 1	sample normal content 1
Sample Header Cell 2	sample normal content 2

This solution would allow you to edit your colors and other styles in just one place (your custom CSS), so your concern about having to to do a bunch of manual edits to your tables flies out the window if you decide to make a change.

there is no tag equivalent.

No there isn't, but this works around that. There is also no support for colspan. My alter-ego wrote a snippet that shows one way around that:
Mimic Colspan With Multiple Tables

I hope this helps! Let us know if you need more clarification.

-Ed

Re:

Mon, 12 Oct 2009 00:37:33 +0000

Also… I went back and looked at my site's custom CSS (which I essentially ripped apart and put back together from a few default pages: CSS here).

Apparently my problem is the same problem someone specified above: there is no tag equivalent.

Has that been changed yet, or is it planned to be changed?

Re: Why not use background color ?

Sun, 11 Oct 2009 19:16:58 +0000

That could work as a temporary solution! I'm just a little wary about using color-scheme-specific coding in my tables, as I already have my table colors set up in my site-wide CSS scheme. If I change my site's color scheme, I'll have to hunt through all my pages and recode color codes in my tables individually; if I get the heading code to work, it would color-change itself. I'd also like to be able to copy-paste my table codes between wikis without having to recode every color tag individually. This is the problem I'm having, even if it is a little OCD of me. ^_^;

Re:

Sun, 11 Oct 2009 19:06:34 +0000

To be honest, I really like the simple syntax and overall it works very well for my purposes: I only really have experience with simple HTML and am learning Wikidot's syntax as I go. But if I were to use complex for this table (or at least this row/cell), what would be the code to use to reference the default "header" cell setting I already have set for my tables? Or, is there a page somewhere that I'm missing that gives a more complete listing of what can be done with tables/an outside website for the same sort of thing that you might recommend? Any help would be appreciated. :)

(no title)

Sun, 11 Oct 2009 16:20:18 +0000

It's interesting that you're mixing "simple and "complex" table syntax together. If you converted everything to the complex syntax, you would have much more control over the formatting of your table.

-Ed

Why not use background color ?

Sun, 11 Oct 2009 08:43:22 +0000

Experience	6765 xp
Total Hit Points Current	31 31
AC	17	10 +3 [armor bonus] +3 [dex] [[Touch: -armor; Flat-footed: -dex]]
Touch AC	13	Flat-footed AC	14

 [[table style="align:left"]] [[row]] [[cell]] ||~ **Experience**|||||| 6765 xp|| ||~ **Total Hit Points** _ **Current**||||||31 _ 31|| ||~ **AC**|| 17||||10 +3 [armor bonus] +3 [dex] @@[[@@Touch: -armor; Flat-footed: -dex@@]]@@|| ||~ **Touch AC**||13[[/cell]][[cell style="width:50px;background: #eee;"]]**Flat-footed AC**||14|| [[/cell]][[/row]][[/table]]

Re: Specifying Cell Width for a Header Cell?

Sun, 11 Oct 2009 08:36:41 +0000

So it's late enough at night that I'm hardly paying attention; I changed the "width:50px" in the second set of coding to "width:130px" and that solved my width issue, but it still isn't resolving as a header cell…

Specifying Cell Width for a Header Cell?

Sun, 11 Oct 2009 08:31:04 +0000

I'm having a little bit of issue getting one of my tables to cooperate… I've decided to use Wikidot to post my D&D character sheets, and one of the tables just isn't behaving.

 [[table style="align:left"]] [[row]] [[cell]] ||~ **Experience**|||||| 6765 xp|| ||~ **Total Hit Points** _ **Current**||||||31 _ 31|| ||~ **AC**|| 17||||10 +3 [armor bonus] +3 [dex] @@[[@@Touch: -armor; Flat-footed: -dex@@]]@@|| ||~ **Touch AC**||13||~ **Flat-footed AC**||14|| [[/cell]][[/row]][[/table]]

gets me

Experience	6765 xp
Total Hit Points Current	31 31
AC	17	10 +3 [armor bonus] +3 [dex] [[Touch: -armor; Flat-footed: -dex]]
Touch AC	13	Flat-footed AC	14

Mostly it's what I want, but the cell for "Flat-footed AC" is way longer than I'd like…

I've also tried

 [[table style="align:left"]] [[row]] [[cell]] ||~ **Experience**|||||| 6765 xp|| ||~ **Total Hit Points** _ **Current**||||||31 _ 31|| ||~ **AC**|| 17||||10 +3 [armor bonus] +3 [dex] @@[[@@Touch: -armor; Flat-footed: -dex@@]]@@|| ||~ **Touch AC**||13[[/cell]][[cell style="width:50px;"]] ~ **Flat-footed AC**||14|| [[/cell]][[/row]][[/table]]

which begets

Experience	6765 xp
Total Hit Points Current	31 31
AC	17	10 +3 [armor bonus] +3 [dex] [[Touch: -armor; Flat-footed: -dex]]
Touch AC	13	~ Flat-footed AC	14

This is a little better for width, but it's too narrow, putting the height off; and it isn't resolving the cell as a "header" cell at all…

Is there something easy that I'm missing? Any help would be appreciated!

Re: Text Vertical Alignment Instead of Middle?

Sat, 18 Jul 2009 10:22:12 +0000

Thanks! Just what I was looking for :)

Re: Forcing a Return

Sun, 05 Jul 2009 21:45:36 +0000

http://www.wikidot.com/doc:wiki-syntax#toc11 - the underscore trick

Re: Forcing a Return

Tue, 30 Jun 2009 17:35:54 +0000

You need to use the "space, underscore" trick like so:

Header 1	Header 2	Header 3	Header 4
list 1, row 1 list 1, row 2 list 1, row 3 list 1, row 4	list 2, row 1 list 2, row 2 list 2, row 3	list 3, row 1 list 3, row 2 list 3, row 3 list 3, row 4 list 3, row 5	list 4, row 1 list 4, row 2 list 4, row 3 list 4, row 4

Depending on your layout and desired look, you may need to play with the vertical alignment as well. Here's the code for the above table:

 [[table style="align: left; border: none; border-collapse: collapse;"]] [[row]] [[cell style="font-weight:bold; border: 1px solid silver; padding:5px;"]] Header 1 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver; padding:5px;"]] Header 2 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver; padding:5px;"]] Header 3 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver; padding:5px;"]] Header 4 [[/cell]] [[/row]] [[row]] [[cell style="border: 1px solid silver; padding:5px;"]] list 1, row 1 _ list 1, row 2 _ list 1, row 3 _ list 1, row 4 [[/cell]] [[cell style="border: 1px solid silver; padding:5px;"]] list 2, row 1 _ list 2, row 2 _ list 2, row 3 [[/cell]] [[cell style="border: 1px solid silver; padding:5px;"]] list 3, row 1 _ list 3, row 2 _ list 3, row 3 _ list 3, row 4 _ list 3, row 5 [[/cell]] [[cell style="border: 1px solid silver; padding:5px;"]] list 4, row 1 _ list 4, row 2 _ list 4, row 3 _ list 4, row 4 [[/cell]] [[/row]] [[/table]]

-Ed

Forcing a Return

Tue, 30 Jun 2009 17:17:16 +0000

Is there any way to 'force' a return in a cell? For instance, in one cell I have a list of items, I want the items to each be on a separate line, but not in different cells. Appreciate any help.

Re: Need to have two tables next to each other

Tue, 28 Apr 2009 12:14:13 +0000

You can set the width of the blank column (or any column for that matter) of cells in px, % or em:

 [[cell style="border: none; width: 5px;"]][[/cell]]

You can also rip out the space character in the cell which should allow it to get as narrow as possible with now specific width setting. You'll notice in my example above, I just set the width in the first row and the rows below pick up that setting. You can totally remove the width setting and the "spacer" column will be very narrow. I added the width in my example above to make the spacer more visible. Here's the same example above with no width setting and null cells in the spacer column:

Header 1	Header 2	Header 3	Header 4	Header 6	Header 7	Header 8
content 1	content 2	content 3	content 4	content 6	content 7	content 8
content 1	content 2	content 3	content 4	content 6	content 7	content 8

 [[table style="align: left; border: none; border-collapse: collapse;"]] [[row]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 1 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 2 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 3 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 4 [[/cell]] [[cell style="font-weight:bold; border: none;"]][[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 6 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 7 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 8 [[/cell]] [[/row]] [[row]] [[cell style="border: 1px solid silver;"]] content 1 [[/cell]] [[cell style="border: 1px solid silver;"]] content 2 [[/cell]] [[cell style="border: 1px solid silver;"]] content 3 [[/cell]] [[cell style="border: 1px solid silver;"]] content 4 [[/cell]] [[cell style="border: none;"]][[/cell]] [[cell style="border: 1px solid silver;"]] content 6 [[/cell]] [[cell style="border: 1px solid silver;"]] content 7 [[/cell]] [[cell style="border: 1px solid silver;"]] content 8 [[/cell]] [[/row]] [[row]] [[cell style="border: 1px solid silver;"]] content 1 [[/cell]] [[cell style="border: 1px solid silver;"]] content 2 [[/cell]] [[cell style="border: 1px solid silver;"]] content 3 [[/cell]] [[cell style="border: 1px solid silver;"]] content 4 [[/cell]] [[cell style="border: none;"]][[/cell]] [[cell style="border: 1px solid silver;"]] content 6 [[/cell]] [[cell style="border: 1px solid silver;"]] content 7 [[/cell]] [[cell style="border: 1px solid silver;"]] content 8 [[/cell]] [[/row]] [[/table]]

[edit: I should also mention that Gerdami's excellent Excel utility to create Wikidot simple or complex table code is a great tool for managing your table content. If you haven't seen it, you should check it out: http://community.wikidot.com/howto:import-simple-excel-tables-into-wikidot]. Version 2 is the one you want for "complex" tables (generates the type of code with styles we're talking about here).

-Ed

Re: Need to have two tables next to each other

Tue, 28 Apr 2009 05:45:26 +0000

It is working great, just wondered if I can decrease the space between the two tables?

 [[cell style="border: none;"]] [[/cell]]

Re: Need to have two tables next to each other

Tue, 28 Apr 2009 05:13:11 +0000

Thanks heaps Ed, that did the trick. I can see how I can use this to also make 3 or even 4 tables next to each other.

Re: Need to have two tables next to each other

Tue, 28 Apr 2009 00:09:48 +0000

You could float the 2 tables, but that could get messy if the browser window isn't wide enough to display them side-by-side. You might try making a single table that is 8 columns wide, leaving column 5 empty to serve as your spacer like this:

Header 1	Header 2	Header 3	Header 4	Header 6	Header 7	Header 8
content 1	content 2	content 3	content 4	content 6	content 7	content 8
content 1	content 2	content 3	content 4	content 6	content 7	content 8

and so on…

You can specify column width, add cell padding, etc. in the style definitions.

 [[table style="align: left; border: none; border-collapse: collapse;"]] [[row]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 1 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 2 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 3 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 4 [[/cell]] [[cell style="font-weight:bold; border: none; width: 10px;"]] [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 6 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 7 [[/cell]] [[cell style="font-weight:bold; border: 1px solid silver;"]] Header 8 [[/cell]] [[/row]] [[row]] [[cell style="border: 1px solid silver;"]] content 1 [[/cell]] [[cell style="border: 1px solid silver;"]] content 2 [[/cell]] [[cell style="border: 1px solid silver;"]] content 3 [[/cell]] [[cell style="border: 1px solid silver;"]] content 4 [[/cell]] [[cell style="border: none;"]] [[/cell]] [[cell style="border: 1px solid silver;"]] content 6 [[/cell]] [[cell style="border: 1px solid silver;"]] content 7 [[/cell]] [[cell style="border: 1px solid silver;"]] content 8 [[/cell]] [[/row]] [[row]] [[cell style="border: 1px solid silver;"]] content 1 [[/cell]] [[cell style="border: 1px solid silver;"]] content 2 [[/cell]] [[cell style="border: 1px solid silver;"]] content 3 [[/cell]] [[cell style="border: 1px solid silver;"]] content 4 [[/cell]] [[cell style="border: none;"]] [[/cell]] [[cell style="border: 1px solid silver;"]] content 6 [[/cell]] [[cell style="border: 1px solid silver;"]] content 7 [[/cell]] [[cell style="border: 1px solid silver;"]] content 8 [[/cell]] [[/row]] [[/table]]

-Ed

Need to have two tables next to each other

Mon, 27 Apr 2009 22:59:39 +0000

Hi all, I need to get two tables next to each other. Table one has 4 columns and 8 rows, table two has 3 columns and 8 rows. I was hoping to have a small space between the two tables. I am new to Wiki's in general and new to 'Advanced Tables' so I hope that someone can help.

Re: Aligning Text In a Cell

Sat, 18 Apr 2009 21:40:23 +0000

The 'Float' thing works just awesome. I wish I had discovered it earlier; it would've saved me a lot of trouble.

Thanks, guy.