Scribd Logo
Carica

Benvenuto in Scribd!

  • Table

    Caricato da

    api-3742735
    45 visualizzazioni4 pagine
    In HTML, tables is defined by tag and cells are specified by and tags. Due to the flexibility of tables, tables provide designers with broader applications. One of the applications is image slicing, a function which can be found in many latest graphics software.

    Descrizione originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOC, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    In HTML, tables is defined by tag and cells are specified by and tags. Due to the flexibility of tables, tables provide designers with broader applications. One of the applications is image slicing, a function which can be found in many latest graphics software.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    45 visualizzazioni4 pagine

    Table

    Caricato da

    api-3742735
    In HTML, tables is defined by tag and cells are specified by and tags. Due to the flexibility of tables, tables provide designers with broader applications. One of the applications is image slicing, a function which can be found in many latest graphics software.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    F.

    4 CIT – HTML – Table page 1

    Introduction
    A table is composed a number of cells and described by the number of rows and columns. In HTML,
    tables is defined by <table> tag and cells are specified by <td> and <th> tags. Text, image or other
    tags which can be put in the <body> tag can also be put into table cells. Also, the cells in tables can be
    merged and split. However, in HTML, different rows can have different number of cells.
    Due to the flexibility of tables, tables provide designers with broader applications. One of the applications
    is image slicing, a function which can be found in many latest graphics software.

    Defining Table
    In defining a table, a number of tags are used together. These tags includes: <TABLE>, <THEAD>,
    <TBODY>, <TFOOT>, <TH>, <TR> and <TD>.
    <TABLE> Tag:
    It creates a table.
    Usage:
    <table>…</table>
    Attributes:
    1. align: Alignment of the text inside.
    Possible value: CENTER | LEFT | RIGHT
    2. background: Background image of the table
    3. bgcolor: Background colour of the table
    4. cols: Number of columns
    5. height, width: Height and width of the table.
    Possible value: number of pixels | auto
    6. border: Width of table border
    7. cellpadding: Distance between the cell border and its content
    8. cellspacing: Distance between two cells
    <THEAD> Tag:
    It creates a table header that browsers can pace intelligently when dealing with long tables.
    Usage:
    <table>
    <thead>...</thead>
    </table>
    Attributes:
    1. align: CENTER | LEFT | RIGHT
    2. valign: TOP | MIDDLE | BOTTOM | BASELINE
    3. background
    4. bgcolor
    F.4 CIT – HTML – Table page 2

    <TBODY> Tag:
    It defines the body of a table separate from any header or footer.
    Usage:
    <table>
    ...
    <tbody>…</tbody>
    ...
    <table>
    Attributes:
    The same as <THEAD> tag.
    <TFOOT> Tag:
    It creates a table footer.
    Usage:
    <table>
    ...
    <tfoot>...</tfoot>
    </table>
    Attributes:
    The same as <THEAD> tag.
    <TR> Tag:
    It defines a row in a table.
    Usage:
    <table>
    <thead> | <tbody> | <tfoot>
    <tr>...</tr>
    <tr>...</tr>
    </thead> | </tbody> | </tfoot>
    </table>
    Attributes:
    Similar to other tags of a table.

    <TH> Tag:
    It defines header cells ni <THEAD> tag. Content enclosed by the <TH> tag is center-justified and
    bold.
    Usage:
    <table>
    <thead>
    <tr>
    F.4 CIT – HTML – Table page 3

    <th>Header 1</th>
    <th> Header 2</th>
    ...
    </tr>
    ...
    </thead>
    </table>
    Attributes:
    Similar to other tags of a table, except that <TH> supports rowspan and colspan.
    <TD> Tag:
    It defines a table cell.
    Usage:
    <table>
    ...
    <tbody>
    <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    ...
    </tr>
    </tbody>
    </table>
    Attributes:
    Same as <TH> tags.

    Merging Cells
    Cells can be merged by using colspan and rowspan attributes in <td> and <th>. colspan merges
    horizontal neighbouring cells while rowspan merges vertical neighbouring cells. The values of
    colspan or rowspan specifies the number of cells that are merged.
    Example:
    <table border="1" width="50%">
    <tr>
    <td colspan="2">1</td>
    <td>2</td>
    </tr>
    <tr>
    <td rowspan="2">3</td>
    <td>4</td>
    F.4 CIT – HTML – Table page 4

    </tr>
    </table>
    Draw the result shown on your browser.

    Image Slicing
    We can put images into table cells, and different images can be put together yet retain the sizes of the
    images and the structure of the table. Such flexibility is done by using the colspan and rowspan
    attributes. Due to this flexibility, a large image is cut into smaller pieces (called slices) for download and
    such technique is called image slicing. Image slicing improves the download speed of large images
    because a number of slices can be downloaded at the same time and some of the slices can be replaced,
    thus reducing the overall image size.
    In writing code for image slicing, we have to note the following:
    1. Border size, cellspacing and cellpadding attributes should be set to 0
    2. Images of pure colour is replaced by cell with the same background colour
    3. Cells without image (those mentioned in (2)) should have a content &nbdp;, Otherwise, the
    table cell will collapse.
    Although image slicing is useful, it is tedious to write the HTML code. Therefore, many latest graphics
    Exercise:
    1. Apply image slicing by using Macromedia Firework.
    2. Change the values of different attributes.
    3. Open the HTML source code and try to understand the codes.

    Potrebbero piacerti anche