Here's a sample of all the "tables" used in the Wracklineblog. The first section shows
each of the tables used. The second section shows the table cells, or "TDs" used. The CSS code for these
elements is shown in red.
TABLES
Plain ol' table: {margin-left:20px; padding:0;}
NOTE: All the "tds" for the display of the various tables are class of "td_bdr1p",
and have a border. This allows outline of each td to be visible. Further, the style for the
"short line of text" is "p_tshow", which has margin 0 and padding 0. |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_bdr2p"
{border:2px solid; padding:0px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_bdr3p_ins"
{border:3px inset; margin-bottom: 5px; padding:2px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_bdr_5p"
{border:5px solid; margin:15px 20px 15px 20px;
border-spacing:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_bdr5p_nm"
{border:5px solid; margin:15px 0px 15px 0px;
border-spacing:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_bdr5p_ins_blk40"
{border:5px inset; margin: 10px 40px 10px 40px;
padding:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_blk20"
{border:2px solid; margin: 10px 20px 10px 20px;
padding:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_blk20_nobdr"
{margin: 10px 20px 10px 20px; padding:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_blk50"
{border:2px solid; margin: 10px 50px 10px 50px;
padding:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_blk50_nobdr"
{margin: 0px 50px 0px 50px; padding:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_blk100"
{border:2px solid; margin: 10px 100px 10px 100px;
padding:10px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_center"
{border:5px solid; margin:5px auto 5px auto;
padding:5px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_cent_nobdr"
{margin:5px auto 5px auto; padding:5px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_bdr5p_cent_sred"
{border:5px solid #772222; margin:15px auto 15px auto;
border-spacing:5px;width:1300px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
Table class = "table_right"
{border:5px solid; margin:5px 20px 5px auto;
padding:5px;} |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of just plain and simple text |
TABLE CELL "TD"
Plain ol' TD (No style specified)
NOTE: All the tables below this one have a 1px border, to more easily show the boundaries
of the individual "TDs". All the TDs for these displays appear as their individual style specifies.
NOTE: Some of the TDs have "text-align:center". This works properly for images,
but the default "paragraph" interferes with this a bit, and won't be in the exact center. |
A short line of just plain and simple text |
A short line of just plain and simple text |
A short line of text |
A short line of just text |
TD class = "td_w_mat"
Usually used with images.
NOTE: Also available as "td_w_mat_w500" and "td_w_mat_w600".
NOTE: Old border color was #0F1455 (dark blue). This does NOT
show "inset". Only lighter colors show inset!
{text-align:center; border:7px inset #9A9A9A; padding:10px;
background-image:url('../images/table_matte_grey.gif');} |
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
 |
|
|
TD class = "td_no_mat"
{text-align:center; border:7px inset #9A9A9A;
padding:10px;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_bdr1p"
{border:1px solid; margin:0; padding:0;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_bdr1p_tac"
{text-align:center; border:1px solid;
margin:0; padding:0;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_bdr1p_w600"
{border:1px solid; margin:0; padding:0; width:550px;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
TD class = "td_bdr1p_w600g"
{border:2px solid #22AA22; margin:0; padding:0; width:550px;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
TD class = "td_bdr1p_w600_grey"
{border:1px solid; margin:0; padding:0; width:550px; background-color:#CDCDC8;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
TD class = "td_bdr3p_out"
{border:3px outset #9A9A9A;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_nopad"
{margin:0px; padding:0px;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_blk10_tac"
{text-align:center; padding-left:10px;
padding-right:10px; border:2px solid;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_blk10_tac_nobdr"
{text-align:center; padding-left:10px;
padding-right:10px;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_blk10_nobdr_rt"
{text-align:right; padding-left:10px;
padding-right:10px;}
NOTE: "text-align:right" does not work for "paragraph"
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_blk10tb"
{padding:10px; border:2px solid;}
NOTE: "blk10tb" means padding of 10 on top and bottom
as well as sides.
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_blk20"
{padding-left:20px; padding-right:20px;
border:2px solid;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_blk20_nobdr"
{padding-left:20px; padding-right:20px;}
NOTE: There is also a "td_blk20_nobdr_w400",
which is 400 px wide.
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_w200"
{width:200px;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
TD class = "td_w275"
{width:275px; border:2px solid;}
|
A short line of plain and simple text |
A short line of plain and simple text |
A short line of text |
A short line of text |
|
|
|
Available also are the following TDs with width: |
td_w50 | {width:50px;} |
td_w150 | {width:150px;} |
td_w175 | td_w175 |
td_w200 | {width:200px;} |
td_w250 | {text-align:center; width:250px;} |
td_w275 | {width:275px; border:2px solid;} |
td_w300 | {width:300px;} |
td_bdr1p_w300 | {border:1px solid; margin:0; padding:10px; width:300px;} |
td_w350 | {text-align:center; width:350px;} |
td_w350_r | {text-align:right; width:350px;} |
td_w350_top | {text-align:center; width:350px; padding-bottom:275px;} |
td_w400 | {text-align:center; width:400px;} |
td_w500 | {text-align:center; width:500px;} |
td_w600 | {width:600px;} |
td_w600_ta | {text-align:center; width:600px;} |
td_w800 | {width:800px;} |
td_w800_ta | {text-align:center; width:800px;} |
td_w1100 | {width:1100px;} |