HTML Tutorial – 11 – Tables

HTML Tutorial – 11 – Tables

Tables allow us to display data in rows and
columns. Each

is organized into rows, using
the table row tag

. And each row is then split into table cells containing either header

or data tags. The cells can be formatted separately and expands to fit its content.
They may also contain their own tables making tables very powerful for creating the page
layout and for positioning elements. Note that for each of these inner table elements
the end tag can be left out. The border attribute specifies the width of
the border in pixels, which is 0 by default for most browsers. The frame attribute is
used to specify which outside borders are displayed and rules controls the borders between
the cells. The width of the rules are not decided by the border attribute but by the
table’s cellspacing. The bordercolor attribute can be set for each
table element to change the color of the borders. Cellspacing is the space between the table
cells and cellpadding is the space between the cell border and its contents. Both of
these attributes can be specified in either pixels or percentage. When specified by percentage,
the browser uses half of the specified percentage for each side of the cell. The width attribute can be applied to all
table elements except for table row and specifies the width of the table cell. And height specifies
the height of the table cell. Width and height can also be a percentage of the screen. Note
that we only need to set the width for one cell in a column in order to affect the other
cells in that column. Background and bgcolor can be used to add
a background image or color to any table element. Cells may span multiple rows and columns using
the rowspan and colspan attributes. The colspan attribute spans a table cell across several
columns and the rowspan attribute stretches a cell across multiple rows in the table. Align controls the horizontal alignment and
can be added to all table elements to force center, left, or right alignment. The table
cells can also align with justified. Valign can set the vertical alignment of table cells
and rows to align the content at either the top, middle, bottom, or baseline.


  1. Post
  2. Post

    @AKSoapy29 You can use the following CSS properties.
    background-repeat : no-repeat;
    background-position : bottom right;

Leave a Reply

Your email address will not be published. Required fields are marked *