Welcome Guest, Not a member yet? Register   Sign In
HTML Table with DIV output tag
#1

[eluser]pembelajar[/eluser]
I have an idea to make our html more valid xhtml (w3c standard), its change the table tag to div tag on html. The logic is very simple, actually we make all with div tag, but with table tag capability. This a class that i have made:
(sorry my english is very bad)

the class call tablediv.php
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Tablediv {

    function Tablediv() {
        $this->tbl_bg_color='';
        $this->tbl_border_color='';
        $this->tbl_border='';
        $this->tbl_width='100%';
        $this->tbl_width_col='';
        $this->head_cell_style='';
        $this->body_row_cell_style='';
        $this->tbl_row_style='';
    }

    function start($align='center') {
        $this->final_tbl .= '<div class="base-layer" align="'.$align.'">';
    }

    function start_head($header_row_id='', $style='', $align='center') {
        $this->final_tbl .= '<div class="mytablerowclass" id="'.$header_row_id.'"  align="'.$align.'">';
    }

    function cell_head($header_text='Header Content', $style='', $align='center') {
        $this->final_tbl .= '<div class="mymaintablerowclass" style="'.$style.'" align="'.$align.'"><h5 class="mytableheaderclass">';
        $this->final_tbl .= $header_text . "</h5></div>";
    }

    function stop_head(){
        $this->final_tbl .= "</div>";
    }

    function start_row($body_row_id='', $style='', $align='center') {
        $this->final_tbl .= '<div class="mytablerowclass" id="'.$body_row_id.'" style="'.$style.'" align="'.$align.'">';
    }

    function cell_row($header_text='Cell Content', $style='', $align='') {
        $this->final_tbl .= '<div class="mymaintablerowclass" style="'.$style.'" align="'.$align.'"><p class="mytablecelltextclass">';
        $this->final_tbl .= $header_text.'</p></div>';
    }

    function stop_row(){
        $this->final_tbl .= "</div>";
    }

    function close(){

        $this->final_tbl .= "</div>";
    }

    function get(){
        return $this->final_tbl;
    }

    function css() {
        $this->tbl_width_col =  sprintf("%d",$this->tbl_width / $this->column) . "%";
        $this->final_tbl .= '&lt;style&gt;
        div.base-layer {
        border: solid #f8f8f8 1px;
        '.$this->tbl_style.'; padding: 0; text-align: center; width: auto;
        }
        div.mytablerowclass {
        width: '.$this->tbl_width.';
        }
        div.mymaintablerowclass {
        float: left; margin: 0; padding: 0; width: '.$this->tbl_width_col.'; '.$this->tbl_row_style.'
        }
        h5.mytableheaderclass {
        '.$this->head_cell_style.'
        }
        p.mytablecelltextclass {
        '.$this->body_row_cell_style.'
        }
        &lt;/style&gt;';
    }
}

Put that class to your application libraries folder, and this is a simple use on controller (tes.php):

Code:
&lt;?php

class Tes extends Controller {

    function Tes()
    {
        parent::Controller();
    }

    function index()
    {
        $this->load->library('tablediv');

        //define table properties
        $this->tablediv->column=4;

        $this->tablediv->tbl_style="background-color: #a1d2f1; ";
        $this->tablediv->head_cell_style="font-family: verdana; height: 5px";
        $this->tablediv->body_row_cell_style="font-family: verdana";
        $this->tablediv->tbl_row_style="font-family: verdana; ";

        //apply css
        $this->tablediv->css();

        //start table
        $this->tablediv->start();

        //start table header
        $this->tablediv->start_head();
        $this->tablediv->cell_head('ID', 'background-color: #f8f8f8');
        $this->tablediv->cell_head('NAMA', 'background-color: #f8f8f8');
        $this->tablediv->cell_head('JABATAN', 'background-color: #f8f8f8');
        $this->tablediv->cell_head('AKSI', 'background-color: #f8f8f8');
        $this->tablediv->stop_head();

        //start body row
        $this->tablediv->start_row();
        $this->tablediv->cell_row('1');
        $this->tablediv->cell_row('Dwi Setiyadi','text-align:left;');
        $this->tablediv->cell_row('Programmer');
        $this->tablediv->cell_row('bikin macem-macem');
        $this->tablediv->stop_row();

        $this->tablediv->start_row();
        $this->tablediv->cell_row('2');
        $this->tablediv->cell_row('Idham Halim');
        $this->tablediv->cell_row('Programmer');
        $this->tablediv->cell_row("Macem2 juga ah","background-color: #f0f0f0;");
        $this->tablediv->stop_row();

        //finalize table
        $this->tablediv->close();

        //get html
        echo $this->tablediv->get();
    }
}
#2

[eluser]Iverson[/eluser]
Great idea! I'm going to plug this in and try it out. Once again, great idea. It's the small things like this that make such a great framework.
#3

[eluser]helmutbjorg[/eluser]
How does this help with w3c spec?
#4

[eluser]Crimp[/eluser]
It doesn't.

The idea that tables are somehow BAD took root way back when CSS was too mysterious and messy for layouts and people made pages out of those tags.

This has evolved into silly things like this -- where people make up divs and ids and classes to replicate tags that are very much part of the W3C standards.

An added downside is that it moves further away from clean, semantic markup, which was the other pillar of the CSS revolution.
#5

[eluser]xwero[/eluser]
great the whole div vs. table discussion reached CI Smile

i have to agree with helmutbjorg and Crimp a table should be made with table tags and not divs.

The bad things of this library, apart from the div use, i see in a glance are:
- different methods between a head and body row. if you want to be complete you have to add a footer row.
- only style and align attributes. the use of the style attribute makes me definitely not want to use the class as it puts css in the html where the idea of css is to separate the visual appearance from the markup.
- adding a style tag is equally bad as the style attribute. Designers will go crazy if you alter their work with php generated css.




Theme © iAndrew 2016 - Forum software by © MyBB