News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Tabular in progress

Started by AzaToth, October 06, 2005, 05:54:23 PM

Previous topic - Next topic

AzaToth

Have tried to make a replacement for table, and here's the progress atm (beware the colors :))

Example code to use:

[tabular=1]
[row] [head]Type[/head] [head]In[/head] [head]Out[/head] [head]Sum[/head] [/row]
[row] [data]Payment[/data] [data]4000[/data] [data]0[/data] [data]4000[/data] [/row]
[row] [data]Food[/data] [data]0[/data] [data]3000[/data] [data]1000[/data] [/row]
[row] [data][red]Mama[/red][/data] [data]10000[/data] [data]0[/data] [data]11000[/data] [/row]
[row] [data]Computer[/data] [data]0[/data] [data]10500[/data] [data]500[/data] [/row]
[row] [data]Jolt[/data] [data]0[/data] [data]500[/data] [data]0[/data] [/row]
[/tabular]


Examples, see next post!

AzaToth

#1
Made it look a litle better:

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

Also it's possible to span rows and cols:

Elmacik

i didnt understand anything.. :P
can you tell to this newbie, what are these?
i mean where is this code used in?
Home of Elmacik

AzaToth

Quote from: elmacik on October 06, 2005, 10:45:08 PM
i didnt understand anything.. :P
can you tell to this newbie, what are these?
i mean where is this code used in?
The code is in progress, if you want to look, here it is:
array(
'tag' => 'tabular',
'type' => 'unparsed_equals_content',
'test' => '\d+',
'content' => '$1',
'trim' => 'both',
'validate' => create_function('&$tag, &$data, $disabled', '
preg_match(\'#\[row\](.*?)\[\/row\]#is\', $data[0], $matches);
static $tabular_cols;
$tabular_cols = preg_match_all(\'#\[head\]#is\',$matches[0],$null);
static $tabular_rows;
$tabular_rows = preg_match_all(\'#\[row\]#is\',$data[0],$null) -1;
$colgroup = "";
for($i = 0; $i < $tabular_cols; $i++) {
$mod = $i%2;
$colgroup .= "<col class=\"tabular_col$mod\" />";
}
$colgroup = "<colgroup>".$colgroup."</colgroup>";

$data[0] = "<table class=\"tabular$data[1]\">$colgroup".substr(parse_bbc($data[0]),6)."</table>";
'),
),
array(
'tag' => 'row',
'type' => 'unparsed_content',
'content' => '$1',
'trim' => 'both',
'validate' => create_function('&$tag, &$data, $disabled', '
static $row;
$row = $row%2;
$data = str_replace("&nbsp;","","<tr class=\"tabular_row$row\">".parse_bbc($data)."</tr>");
$row++;

'),
),
array(
'tag' => 'data',
'parameters' => array(
'colspan' => array( 'match' => '(\d+)', 'optional' => true, 'value' => ' colspan="$1"'),
'rowspan' => array( 'match' => '(\d+)', 'optional' => true, 'value' => ' rowspan="$1"'),
),
'before' => '<td{colspan}{rowspan}>',
'after' => '</td>',
'trim' => 'outside',
'block_level' => true,
'disabled_before' => '',
'disabled_after' => '',
),
array(
'tag' => 'data',
'before' => '<td>',
'after' => '</td>',
'trim' => 'outside',
'block_level' => true,
'disabled_before' => '',
'disabled_after' => '',
),

array(
'tag' => 'head',
'type' => 'unparsed_content',
'content' => '$1',
'trim' => 'both',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = "<th>".parse_bbc($data)."</th>";
'),
),

Elmacik

#4
ahaa i got it, its really so nice. it will ease creating tables much.
i would love to have a tool to convert these sweet codes into html tables, as i am in trouble with them :P
(post a new topic and copy the source :S yeah nice)
Home of Elmacik

AzaToth

Quote from: elmacik on October 06, 2005, 10:52:22 PM
ahaa i got it, its really so nice. it will ease creating tables much.
i would love to have a tool to convert these sweet codes into html tables, as i am in trouble with them :P
(post a new topic and copy the source :S yeah nice)
the html code for this particular table will be like (no linebreakes I'm afraid  8)):
<table class="tabular4"><colgroup><col class="tabular_col0" /><col class="tabular_col1" /><col class="tabular_col0" /><col class="tabular_col1" /></colgroup><tr class="tabular_row0"><th>Type</th><th>In</th><th>Out</th><th>Sum</th></tr><tr class="tabular_row1"><td>Payment</td><td>4000</td><td>0</td><td>4000</td></tr><tr class="tabular_row0"><td>Food</td><td>0</td><td>3000</td><td>1000</td></tr><tr class="tabular_row1"><td>Mama</td><td>10000</td><td>0</td><td>11000</td></tr><tr class="tabular_row0"><td>Computer</td><td>0</td><td>10500</td><td>500</td></tr><tr class="tabular_row1"><td>Jolt</td><td>0</td><td>500</td><td>0</td></tr></table>

Elmacik

oh no matter since its still handy :P
i can breake manualy :P
when the progress will end? :P :D
Home of Elmacik

AzaToth

Quote from: elmacik on October 06, 2005, 11:03:42 PM
oh no matter since its still handy :P
i can breake manualy :P
when the progress will end? :P :D
progress never ends   :P

by the way, the css:

.tabular1, .tabular2, .tabular3, .tabular4, .tabular5 {
margin: 1em;
width : 50%;
border-collapse: collapse;
empty-cells: show;
}

.tabular1 td, .tabular1 th,
.tabular2 td, .tabular2 th,
.tabular3 td, .tabular3 th,
.tabular4 td, .tabular4 th,
.tabular5 td, .tabular5 th {
padding : 0.2em;
border: 1px solid black;
}

.tabular1 th, .tabular2 th, .tabular3 th, .tabular4 th, .tabular5 th {
text-align : left;
background : #6b8eae;
color: white;
}

.tabular1 colgroup col.tabular_col0 {
background : #cdcdcd;
}
.tabular1 colgroup col.tabular_col1 {
background : #bcbcbc;
}
.tabular5 colgroup col.tabular_col0,
.tabular5 colgroup col.tabular_col1 {
background : #efefef;
}

.tabular2 .tabular_row0 {
background : #cdcdcd;
}
.tabular2 .tabular_row1 {
background : #bcbcbc;
}


.tabular3 td {
background : #cdcdcd;
}
.tabular3 tr td:first-child {
background : #bcbcbc;
}


.tabular4 .tabular_row0 {
background : #efefef;
}
.tabular4 .tabular_row1 {
background : #dedede;
}

.tabular4 tr.tabular_row0 td:first-child {
background : #cdcdcd;
}
.tabular4 tr.tabular_row1 td:first-child {
background : #bcbcbc;
}

Elmacik

Home of Elmacik

AzaToth


AzaToth

Have updated it now, now you can have captions also   8)

Example:

[tabular type=4 caption="Hello World"]
[row][head]00[/head] [head]01[/head] [head]11[/head] [head]10[/head] [/row]
[row][data]01[/data] [data]11[/data] [data]10[/data] [data]00[/data] [/row]
[row][data]11[/data] [data]10[/data] [data]00[/data] [data]01[/data] [/row]
[row][data]10[/data] [data]01[/data] [data]01[/data] [data]11[/data] [/row]
[/tabular]

Render this:


You can have bbc in the caption.

Advertisement: