Some HTML::ElementTable examples


use HTML::ElementTable;
use HTML::AsSubs;

$t = HTML::ElementTable->new(maxrow => 10, maxcol => 12);

# Manipulating $t as an element will change the characteristics
# of the <table> tag.  The table() method lets you manipulate
# all cells in the table simultaneously.

$t->table->push_position;
print $t->as_HTML;

Our table thus far, default values, containing only positional coordinates.

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,6) (3,7) (3,8) (3,9) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,5) (4,6) (4,7) (4,8) (4,9) (4,10) (4,11) (4,12)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,5) (5,6) (5,7) (5,8) (5,9) (5,10) (5,11) (5,12)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,5) (6,6) (6,7) (6,8) (6,9) (6,10) (6,11) (6,12)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

# <TABLE> attributes
$t->attr('cellspacing',0);
$t->attr('border',1);
$t->attr('bgcolor','#DDBB00');

# glob of entire table - optimize on <TR> or pass to all <TD>
$t->table->attr('align','left');
$t->table->attr('valign','top');

# row glob attributes (optimizes on <TR> if possible)
$t->row(0,2,4,6)->attr('bgcolor','#9999FF');

# column glob attributes (all go to <TD> tags within column)
$t->col(0,4,8,12)->attr('bgcolor','#BBFFBB');

# span glob attributes (all go to <TD> elements
# unless there happens to be a full row, then <TR>)
$t->box(7,1 => 10,3)->attr('bgcolor','magenta');
$t->box(7,7 => 10,5)->attr('bgcolor','magenta');
$t->box(8,9 => 9,11)->attr('bgcolor','magenta');
$t->box(7,10 => 10,10)->attr('bgcolor','magenta');

# individual <TD> attributes
$t->cell(8,6)->attr('bgcolor','#FFAAAA');
$t->cell(9,6)->attr('bgcolor','#FFAAAA');
$t->cell(7,9, 10,9, 7,11, 10,11)->attr('bgcolor','#FFAAAA');
print $t->as_HTML;

Wow, colors!

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,6) (3,7) (3,8) (3,9) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,5) (4,6) (4,7) (4,8) (4,9) (4,10) (4,11) (4,12)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,5) (5,6) (5,7) (5,8) (5,9) (5,10) (5,11) (5,12)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,5) (6,6) (6,7) (6,8) (6,9) (6,10) (6,11) (6,12)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

$t->cell(3,5)->attr(colspan => 5);
$t->cell(3,5)->attr(rowspan => 4);
$t->cell(5,0)->attr(colspan => 4);
$t->cell(5,0)->attr(rowspan => 4);
print $t->as_HTML;

The elements that are covered have not been destroyed. They have merely been masked.
Note that the table cells retain the grid coordinates you would expect if the table really were a grid rather than a tree.
Also note that if the extended cells had happened to overlap, the masked cells would keep track of their depth. That's bad HTML, but good programming.

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,10) (4,11) (4,12)
(5,0) (5,4) (5,10) (5,11) (5,12)
(6,4) (6,10) (6,11) (6,12)
(7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

$t->cell(5,0)->attr('colspan', undef);
$t->cell(5,0)->attr('rowspan', undef);
print $t->as_HTML;

See their resiliance?

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,10) (4,11) (4,12)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,10) (5,11) (5,12)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,10) (6,11) (6,12)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

$t->cell(3,5)->attr(colspan => 3);
$t->cell(3,5)->replace_content(img({src => 'johnny.jpg'}));
$t->cell(3,5)->attr(align => 'center');
print $t->as_HTML;

Cells can have arbitrary content, HTML::Element style.

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,8) (3,9) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,8) (4,9) (4,10) (4,11) (4,12)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,8) (5,9) (5,10) (5,11) (5,12)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,8) (6,9) (6,10) (6,11) (6,12)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

$t->cell(3,5)->delete_content;
$t->cell(3,5)->push_position;
$t->cell(3,5)->attr(align => 'left');
$t->cell(3,5)->attr('colspan', undef);
$t->cell(3,5)->attr('rowspan', undef);
print $t->as_HTML;

Back to normal...

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,6) (3,7) (3,8) (3,9) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,5) (4,6) (4,7) (4,8) (4,9) (4,10) (4,11) (4,12)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,5) (5,6) (5,7) (5,8) (5,9) (5,10) (5,11) (5,12)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,5) (6,6) (6,7) (6,8) (6,9) (6,10) (6,11) (6,12)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

$t->maxcol($t->maxcol + 5);
$t->col($t->maxcol - 4 .. $t->maxcol)->push_position;
print $t->as_HTML;

Added 5 columns. Note how characteristics of the rows extend to the new columns.

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12) (0,13) (0,14) (0,15) (0,16) (0,17)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12) (1,13) (1,14) (1,15) (1,16) (1,17)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12) (2,13) (2,14) (2,15) (2,16) (2,17)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,6) (3,7) (3,8) (3,9) (3,10) (3,11) (3,12) (3,13) (3,14) (3,15) (3,16) (3,17)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,5) (4,6) (4,7) (4,8) (4,9) (4,10) (4,11) (4,12) (4,13) (4,14) (4,15) (4,16) (4,17)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,5) (5,6) (5,7) (5,8) (5,9) (5,10) (5,11) (5,12) (5,13) (5,14) (5,15) (5,16) (5,17)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,5) (6,6) (6,7) (6,8) (6,9) (6,10) (6,11) (6,12) (6,13) (6,14) (6,15) (6,16) (6,17)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12) (7,13) (7,14) (7,15) (7,16) (7,17)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12) (8,13) (8,14) (8,15) (8,16) (8,17)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12) (9,13) (9,14) (9,15) (9,16) (9,17)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12) (10,13) (10,14) (10,15) (10,16) (10,17)

$t->maxrow($t->maxrow + 5);
$t->row($t->maxrow - 4 .. $t->maxrow)->push_position;
print $t->as_HTML;

Added 6 rows. In this case, the brand new rows inherit the properties of the top level table.

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12) (0,13) (0,14) (0,15) (0,16) (0,17)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12) (1,13) (1,14) (1,15) (1,16) (1,17)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12) (2,13) (2,14) (2,15) (2,16) (2,17)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,6) (3,7) (3,8) (3,9) (3,10) (3,11) (3,12) (3,13) (3,14) (3,15) (3,16) (3,17)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,5) (4,6) (4,7) (4,8) (4,9) (4,10) (4,11) (4,12) (4,13) (4,14) (4,15) (4,16) (4,17)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,5) (5,6) (5,7) (5,8) (5,9) (5,10) (5,11) (5,12) (5,13) (5,14) (5,15) (5,16) (5,17)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,5) (6,6) (6,7) (6,8) (6,9) (6,10) (6,11) (6,12) (6,13) (6,14) (6,15) (6,16) (6,17)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12) (7,13) (7,14) (7,15) (7,16) (7,17)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12) (8,13) (8,14) (8,15) (8,16) (8,17)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12) (9,13) (9,14) (9,15) (9,16) (9,17)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12) (10,13) (10,14) (10,15) (10,16) (10,17)
(11,0) (11,1) (11,2) (11,3) (11,4) (11,5) (11,6) (11,7) (11,8) (11,9) (11,10) (11,11) (11,12) (11,13) (11,14) (11,15) (11,16) (11,17)
(12,0) (12,1) (12,2) (12,3) (12,4) (12,5) (12,6) (12,7) (12,8) (12,9) (12,10) (12,11) (12,12) (12,13) (12,14) (12,15) (12,16) (12,17)
(13,0) (13,1) (13,2) (13,3) (13,4) (13,5) (13,6) (13,7) (13,8) (13,9) (13,10) (13,11) (13,12) (13,13) (13,14) (13,15) (13,16) (13,17)
(14,0) (14,1) (14,2) (14,3) (14,4) (14,5) (14,6) (14,7) (14,8) (14,9) (14,10) (14,11) (14,12) (14,13) (14,14) (14,15) (14,16) (14,17)
(15,0) (15,1) (15,2) (15,3) (15,4) (15,5) (15,6) (15,7) (15,8) (15,9) (15,10) (15,11) (15,12) (15,13) (15,14) (15,15) (15,16) (15,17)

$t->extent($t->maxrow - 5, $t->maxcol - 5);
print $t->as_HTML;

Deleted 5 rows, 5 columns, back to normal.

(0,0) (0,1) (0,2) (0,3) (0,4) (0,5) (0,6) (0,7) (0,8) (0,9) (0,10) (0,11) (0,12)
(1,0) (1,1) (1,2) (1,3) (1,4) (1,5) (1,6) (1,7) (1,8) (1,9) (1,10) (1,11) (1,12)
(2,0) (2,1) (2,2) (2,3) (2,4) (2,5) (2,6) (2,7) (2,8) (2,9) (2,10) (2,11) (2,12)
(3,0) (3,1) (3,2) (3,3) (3,4) (3,5) (3,6) (3,7) (3,8) (3,9) (3,10) (3,11) (3,12)
(4,0) (4,1) (4,2) (4,3) (4,4) (4,5) (4,6) (4,7) (4,8) (4,9) (4,10) (4,11) (4,12)
(5,0) (5,1) (5,2) (5,3) (5,4) (5,5) (5,6) (5,7) (5,8) (5,9) (5,10) (5,11) (5,12)
(6,0) (6,1) (6,2) (6,3) (6,4) (6,5) (6,6) (6,7) (6,8) (6,9) (6,10) (6,11) (6,12)
(7,0) (7,1) (7,2) (7,3) (7,4) (7,5) (7,6) (7,7) (7,8) (7,9) (7,10) (7,11) (7,12)
(8,0) (8,1) (8,2) (8,3) (8,4) (8,5) (8,6) (8,7) (8,8) (8,9) (8,10) (8,11) (8,12)
(9,0) (9,1) (9,2) (9,3) (9,4) (9,5) (9,6) (9,7) (9,8) (9,9) (9,10) (9,11) (9,12)
(10,0) (10,1) (10,2) (10,3) (10,4) (10,5) (10,6) (10,7) (10,8) (10,9) (10,10) (10,11) (10,12)

By the way, the boxed code on this page was produced with the following subroutine (uses HTML::AsSubs). The code is embedded within an inner and outer table to produce a black border.

sub boxed {
  # Box-o-code
  my $c = shift;
  my $ot = new HTML::ElementTable (
				     maxrow => 0,
				     maxcol => 0,
				     border => 0,
				     cellpadding => 0,
				     cellspacing => 0,
				     bgcolor => '#000000'
				    );
  my $it = new HTML::ElementTable (
				     maxrow => 0,
				     maxcol => 0,
				     border => 0,
				     cellpadding => 5,
				     cellspacing => 1,
				     bgcolor => '#FFFFCC'
				    );
  $it->cell(0,0)->replace_content(pre($c));
  $ot->cell(0,0)->replace_content($it);
  $ot->as_HTML;
}

Back to description
sisk@mojotoad.com