Rabu, 26 Juni 2013

HTML Table Setting & Column Sizes

HTML Table Setting & Column Sizes

Within an HTML table, developers can list the rows, columns and content that the Web browser will display using a tabular layout. When determining presentation for tables and table columns, developers can choose to specify style properties within the HTML markup or in separate Cascading Style Sheet code. HTML tables, and their columns, can incorporate lots of possible settings and styling options.

Table Style

    Using CSS declarations, you can specify the properties for HTML tables, columns and cells. The following example HTML markup creates a simple table element:




    A Cell
    Another Cell

    The "tr" element represents a table row, while the "td" element is a single cell within a row. The content of each cell lies between the opening and closing "td" tags. This page can include CSS declarations either in the head section or in a separate CSS file linked to from there. The following sample CSS code demonstrates setting a few particular elements of table style:
    table border: 1px solid 000000; width:60%;
    td padding:3px;

    This code sets table properties including width, relative to the table's parent element, plus border width, style and color. The "td" declaration for padding affects all table cells in the page, adding space between the content of a cell and its edge.

HTML Elements

    Web pages can use the HTML "col" element to define properties of table columns. The following amended table markup demonstrates using the element:





    A CellAnother Cell

    The "col" tags here dictate alignment for the two columns within the table. Other attributes of the element allow developers to set properties for vertical alignment and for applying styling to multiple columns. The "colgroup" element specifies formatting for a group of columns within a table as follows:




    A CellAnother Cell

    This element dictates alignment for both columns in the table.

Column Style

    Web pages can dictate styling for "col" and "colgroup" elements using CSS code, either in-line, as part of the HTML markup, or separately, within CSS files. The following sample HTML markup demonstrates adding a class attribute to an element:

    Within the CSS code for this page, the following sample code could specify style rules for the columns with this particular class attribute value:
    col.maincol
    color:330000;
    background-color:CCCCCC;

    To specify the "col" elements within tables with a particular class attribute, CSS can use the following code:
    table.maintable col padding:5px;

Attributes