Understanding through Discussion


Welcome! You are not logged in. [ Login ]
EvC Forum active members: 114 (8789 total)
Current session began: 
Page Loaded: 09-20-2017 11:05 PM
354 online now:
DrJones*, edge, Greatest I am, Minnemooseus (Adminnemooseus) (4 members, 350 visitors)
Chatting now:  Chat room empty
Newest Member: Porkncheese
Post Volume:
Total: 819,194 Year: 23,800/21,208 Month: 1,765/2,468 Week: 274/822 Day: 67/82 Hour: 0/1

Announcements: Reporting debate problems OR discussing moderation actions/inactions


Thread  Details

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


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 responded

    
jar
Member
Posts: 29363
From: Texas!!
Joined: 04-20-2004
Member Rating: 3.2


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 responded

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

  
Admin
Director
Posts: 12527
From: EvC Forum
Joined: 06-14-2002


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 yet responded

    
Newer Topic | Older Topic
Jump to:


Copyright 2001-2015 by EvC Forum, All Rights Reserved

™ Version 4.0 Beta
Innovative software from Qwixotic © 2017