Tuesday, 28 June, 2022

webmastertools4u

Webmaster Tools

single post

HTML

HTML tables

Adding tables to your HTML document
 


 

Information represented in tables is easy understandable, compact. That’s why tables are used very often in HTML documents. HTML table command begins with the <TABLE> tag and ends with the </TABLE> closing tag. Table is made up of rows (<TR>…</TR>) and cells (<TD>…</TD>). Command <CAPTION>…</CAPTION> is used for table header and command <TH>…</TH> – for table column headers. Simple table HTML code would be:

<TABLE>
<CAPTION> Table name </CAPTION>
<TR> < !– Column names –>
<TH> First column </TH>
<TH> Second column </TH>
</TR>
<TR> < !– First row –>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

 

The result:

Table name

First column

Second column

Data

Data

Probably not very impressive but all commands have additional optional attributes that can change a table a lot.

<TABLE> command attributes:

ALIGN=”LEFT|CENTER|RIGHT” – “orientates” a table on a page.

WIDTH=”pixels|procentage” – specifies the table width.

BORDER – specifies the table border width in pixels.

CELLSPACING=”pixels” – specifies the space between cells.

CELLPADDING=”pixels” – specifies the distance between the cell text and the cell border.

BGCOLOR=”color_code” – specifies table background color.

BACKGROUND=”link to image file” – another way to change the table background.

<TABLE CELLSPACING=10 BORDER=4 CELLPADDING=5 ALIGN=”RIGHT” WIDTH=”70%” BGCOLOR=”#C0C0C0″>
<TR> < !– Column names –>
<TH> First column </TH> <TH> Second column </TH>
</TR>
<TR> < !– First row –>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

 

The result:

First column

Second column

Data

Data

<TR> command attributes:

ALIGN=”LEFT|CENTER|RIGHT” – specifies the horizontal cell contents orientation of the row (to the left/right border or in the middle).

VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE” – specifies the vertical cell contents orientation of the row (to the top, bottom etc.).

BGCOLOR=”color_code” – specifies the row background color.

<TABLE ALIGN=”RIGHT” BORDER=1>
<TR BGCOLOR=”#C0C0C0″>
<TH> First column </TH> <TH> Second column </TH>
</TR>
<TR BGCOLOR=”#FFFFFF” ALIGN=”Center”>
<TD> Data </TD>
<TD> Data </TD>
<TR VALIGN=”Middle”><TD> Data <BR> Second row </TD> <TD> Data </TD>
</TR>
</TABLE>

 

The result:

First column

Second column

Data

Data

Data
Second row

Data

<TD>, <TH> command attributes:

ALIGN=”LEFT|CENTER|RIGHT” – as rows.

VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE” – as rows.

WIDTH=”pixels|procentage” – specifies the cell width in comparison with the whole table width. Note: if you change one cell width, all column cell widths will change accordingly.

HEIGHT=”pixels|procentage” – specifies the cell height. If you change one cell height, the whole row height will change accordingly.NOWRAP – the same effect would be if you put cell text between <NOBR> tags.COLSPAN – this attribute specifies how many columns the cell will span.ROWSPAN – this attribute specifies how many rows the cell will span.BGCOLOR=”color_code” – specifies the cell background color. 

<TABLE BORDER=1 ALIGN=”RIGHT” WIDTH=”70%”>
<TR BGCOLOR=”#C0C0C0″><TH COLSPAN=2> First column </TH>
<TH ROWSPAN=2> Second column </TH></TR>
<TR BGCOLOR=”#C0C0C0″><TH BGCOLOR=”#808080″> One column part </TH>
<TH> Other column part </TH></TR>
<TR BGCOLOR=”#FFFFFF” ALIGN=”Center”><TD> Lots lots lots lots lots of data </TD>
<TD NOWRAP> Lots lots lots lots lots of data </TD>
<TD VALIGN=”Bottom”> Other data </TD></TR>
<TR VALIGN=”Middle”> <TD ALIGN=”Right” ROWSPAN=2> Data <BR> Second row </TD>
<TD ROWSPAN=2> Data </TD><TD> First row </TD></TR>
<TR><TD ALIGN=”Right”> Second row </TD></TR>
</TABLE>

The result:

First column

Second column

One column part

Other column part

Lots lots lots lots lots of data

Lots lots lots lots lots of data

Other data

Data
Second row

Data

First row

Second row

 

So, now you can create a web page with tables. Well, let’s move on to the next section HTML images.

Recent Comments

No comments to show.

Archives

Categories