Register | Sign In


Understanding through Discussion


EvC Forum active members: 65 (9162 total)
3 online now:
Newest Member: popoi
Post Volume: Total: 915,806 Year: 3,063/9,624 Month: 908/1,588 Week: 91/223 Day: 2/17 Hour: 0/0


Thread  Details

Email This Thread
Newer Topic | Older Topic
  
Author Topic:   Just Released: Support for Tables in Messages
Admin
Director
Posts: 12995
From: EvC Forum
Joined: 06-14-2002
Member Rating: 2.3


Message 1 of 3 (590272)
11-07-2010 10:31 AM


Code supporting a set of three new dBCodes for creating tables in messages has just been released: [table], [row], [col]
Before using these new codes you should click on the Reload or Refresh icon in your browser. This will load the new CSS code that supports these new codes.
You can use these table dBCodes to create very simple tables, for example (click on Peek to see how any of the examples were done):
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
You can customize as much or as little as you want. For example, maybe you don't want borders. If you click on Peek you'll see that I set the border width to 0 pixels by changing the [table] dBCode to have a value: [table=border-width: 0px]. I also modified the padding for the cells:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
You can, of course, customize quite a bit more. In this version of the same table I change the border and background color, and I center the data in the cell:
Animal: Males: Females: Total:
Cats 22 15 37
Dog 51 53 104
You can also customize for something more esoteric. Here the table dBCodes are used to create a tic-tac-toe grid:
And naturally you could use this to show the progress of a tic-tac-toe game:
º º
If you click on peek then you'll notice that the values for the dBCodes are CSS rules separated by semicolons, just as in normal CSS. All the CSS codes are available. The only difference in behavior is that the border properties are fully inherited downward. This means that if you want a border 3 pixels wide you only have to specify it in the top level [table] code and not in the [row] and [col] codes contained within, for example this sets the [table] dBCode to be [table=border-width: 3px]:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
But if you want one of the cells to have a wider border, then you can do that, too, in this case by setting the appropriate [col] dBCode to be [col=border-width: 6px]:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
Or instead give it a different background color by setting the appropriate [col] dBCode to be [col=background-color: red]:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
Or a different border color by setting the appropriate [col] dBCode to be [col=border-color: red; border-width: 4px]:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
Or give all the cells different background colors, along with a different border color for the table:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
A description of the [table], [row] and [col] dBCodes has been added to the dBCode help HERE.
Please post comments, issues, bugs, suggestions, etc., to this thread.
--Admin

Replies to this message:
 Message 2 by jar, posted 11-07-2010 10:51 AM Admin has replied

  
jar
Member (Idle past 393 days)
Posts: 34026
From: Texas!!
Joined: 04-20-2004


Message 2 of 3 (590276)
11-07-2010 10:51 AM
Reply to: Message 1 by Admin
11-07-2010 10:31 AM


Does it support alignments?

Anyone so limited that they can only spell a word one way is severely handicapped!

This message is a reply to:
 Message 1 by Admin, posted 11-07-2010 10:31 AM Admin has replied

Replies to this message:
 Message 3 by Admin, posted 11-07-2010 11:28 AM jar has not replied

  
Admin
Director
Posts: 12995
From: EvC Forum
Joined: 06-14-2002
Member Rating: 2.3


Message 3 of 3 (590282)
11-07-2010 11:28 AM
Reply to: Message 2 by jar
11-07-2010 10:51 AM


jar writes:
Does it support alignments?
Yes, it supports all CSS properties. For example, you could take the first table of the opening post and change it from left aligned as it was originally:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
To be right aligned just by changing the [table] code to be [table=text-align: right]:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
And naturally you can set the alignment for the [row] and [col] codes individually if you want.
If you instead meant alignment of the entire table on the page, then you can just use the [center] dBCode to change to center alignment:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104
Or for right alignment of a table you have to use some more complex HTML combined with appropriate CSS codes, it's kind of klugey:
Animal Males Females Total
Cats 22 15 37
Dog 51 53 104

Edited by Admin, : Punctuation.

--Percy
EvC Forum Director

This message is a reply to:
 Message 2 by jar, posted 11-07-2010 10:51 AM jar has not replied

  
Newer Topic | Older Topic
Jump to:


Copyright 2001-2023 by EvC Forum, All Rights Reserved

™ Version 4.2
Innovative software from Qwixotic © 2024