1 / 29

Tables

Tables. Tables in HTML. Introduction. A table is an orderly arrangement of data distributed across a grid of rows and columns similar to a spreadsheet . Tables are used on websites for two purpose : The obvious purpose of arranging information in a table.

elton
Download Presentation

Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tables Tables in HTML

  2. Introduction A table is an orderly arrangement of data distributed across a grid of rows and columns similar to a spreadsheet . Tables are used on websites for two purpose : • The obvious purpose of arranging information in a table. • The less obvious –but more widely used- purpose of creating a page layout with the use of hidden tables.

  3. Introduction The most important layout aspect that can be done with tables are: • Dividing the page into separates sections. An invisible table is excellent for this purpose. • Creating menus. Typically with one color for the header and another for the links following in the next lines • Adding interactive form fields. Typically a gray area containing a search option. • Creating fast loading header for the page. A colored table with a text on it loads like a bullet compared to even a small banner. • Easy alignment of images that have been cut into smaller pieces. • A simple way to allow text to be written in two or more columns next to each other.

  4. Basic Table Tag • <Table>:- In order to create a table in a web page, firstly the structure of the table is to be defined using TABLE tag in HTML. Its a paired tag. • <TR>:-When the structure of a table is created <TR> tag is used to add row in a table. Its also a paired tag. Example <TABLE> <TR> ----------- ----------- </TR> </TABLE>

  5. Basic Table Tag • <TH>:Marks a heading cell within a row .it is similar to the heading tag on a web page and is used to give a proper heading to the columns of the table. This tag is optional and you can create table without using <TH> tag. • <TD>:It is a data cell tag and used for the body of the table.

  6. Example <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE> <TR> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> </TR> <TR> <TD>DHTML</TD> <TD> THOMAS A.POWELL</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> </TR> </TABLE> </BODY> </HTML>

  7. SETTING TABLE BORDERS Tables with borders are much easier to read and are more attractive .You can specify a table border by using “border=number” attribute in the opening table tag. The color of the can be set using the “border color” attribute in <Table> tag.

  8. Example <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE BORDER=15 BORDERCOLOR=“PINK”> <TR> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> </TR> <TR> <TD>DHTML</TD> <TD> THOMAS A.POWELL</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> </TR> </TABLE> </BODY> </HTML>

  9. ADDING ROWS In order to add new rows in a table ,you just need to insert <TR> and <TD> tags. Type these tags wherever you want the rows to appear. Example: <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE> <TR> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> </TR> <TR> <TD>DHTML</TD>

  10. ADDING ROWS <TD> THOMAS A.POWELL</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> </TR> <TR> <TD>ANSI C</TD> <TD> BALAGURUSWAMY </TD> </TR> </TABLE> </BODY> </HTML>

  11. ADDING COLUMN • Inserting a new column requires to add a header cell and data cells for each row of the table. To add columns in a table ,you requires inserting the TH tags and the TD tags you add these tags wherever you have a desires for the new column to appear.

  12. ADDING COLUMN <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE BORDER=15 BORDERCOLOR=“PINK”> <TR> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> <TH>COST</TH> </TR> <TR> <TD>DHTML</TD> <TD> THOMAS A.POWELL</TD> <TD>Rs.200</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> <TD>Rs.150</TD> </TR> </TABLE> </BODY> </HTML>

  13. Including Background Color You can even set background color for the whole table, row or for a table cell. The background color can be set for the whole table by using “bgcolor= color” attribute in the <table> tag. In order to set different background colors for a particular cell or a row ,you can use the bgcolor attribute with <th> and <tr> tags.

  14. Including Background Color <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE BORDER=15 BORDERCOLOR=“PINK” bgcolor=“blue”> <TR bgcolor=“yellow”> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> <TH>COST</TH> </TR> <TR> <TD>DHTML</TD> <TD bgcolor=“green”> THOMAS A.POWELL</TD> <TD>Rs.200</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> <TD>Rs.150</TD> </TR> </TABLE> </BODY> </HTML>

  15. Deleting Rows And Columns To delete a row just delete the related <td> and<tr> tag enclosing that row.Instead of deleting the associated lines of codes : you can also make them as comment. Any text or code include between <- and -> will act as a comment. A comment can be placed any where in the document and the browser will ignore everything within brackets. On similar basis columns can be deleted from a table.

  16. Deleting Rows And Columns <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE BORDER=15 BORDERCOLOR=“PINK” bgcolor=“blue”> <TR bgcolor=“yellow”> <!-<TH>TITLE OF BOOKS</TH>-> <TH> AUTHORS </TH> <TH>COST</TH> </TR> <TR> <!-<TD>DHTML</TD>-> <TD bgcolor=“green”> THOMAS A.POWELL</TD> <TD>Rs.200</TD> </TR> <TR> <!-<TD>SAD</TD>-> <TD> AWAD </TD> <TD>Rs.150</TD> </TR> </TABLE> </BODY> </HTML>

  17. Width And Height A particular size of the table can be specified using “ width” and “height” attribute in the <table> tag. Both “width” & “height” attribute accept either number of pixels or the percentage of the browser’s window width. Also align attribute can be used to specify the position of the table in the browser window. This attribute is to be included within the opening <Table> tag.

  18. Width And Height <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE BORDER=15 WIDTH=“20” HEIGHT=“30” ALIGN=“CENTER”> <TR bgcolor=“yellow”> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> <TH>COST</TH> </TR> <TR> <TD>DHTML</TD> <TD bgcolor=“green”> THOMAS A.POWELL</TD> <TD>Rs.200</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> <TD>Rs.150</TD> </TR> </TABLE> </BODY> </HTML>

  19. Including Image within Tables • An image can either be included in table cell or can act as a background in a table: • To add a background image: Use “background” attribute in the opening <Table> tag. It will take the URL of the image as its value and the background images are titled throughout the available table space. • To include images within Cells: Images can be included within header or data cell . For that add <IMG> attribute between the <TD> or <TH> cell tags with proper URL specifying the source of the image.

  20. Including Image within Tables <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE BORDER=15 BACKGROUND=“ d:\picture.jpg”> <TR> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> <TH>COST</TH> </TR> <TR> <TD>DHTML</TD> <TD> <IMG SRC= “c:\ picture.jpg”>THOMAS A.POWELL</TD> <TD>Rs.200</TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> <TD>Rs.150</TD> </TR> </TABLE> </BODY> </HTML>

  21. Spanning Rows And Columns Two attributes “rowspan” and “colspan” are used to combine adjoining cells into larger cell .These attribute are used in either <TH> or <TD> tags and accept a number as value. For rowspan attribute this number indicates the number of rows a cell should take up and for colspan the number of column the cell should span.

  22. Spanning Rows And Columns <HTML> <HEAD> <TITLE>TABLE TAGS </TITLE> </HEAD> <BODY> <TABLE> <TR> <TH>TITLE OF BOOKS</TH> <TH> AUTHORS </TH> </TR> <TR> <TD ROWSPAN= “2”>DHTML</TD> <TD> THOMAS A.POWELL</TD> </TR> <TR> <TD>GURWINDER SINGH </TD> </TR> <TR> <TD>SAD</TD> <TD> AWAD </TD> </TR> </TABLE> </BODY> </HTML>

  23. Specifying Cell Size and Alignment • The size of a cell in a table can be adjusted using the “width” attribute. Specifying cell sizes avoids wrapping of text and makes the content easier to read. • Not only the size of a cell can be adjusted but we can even control where in the cell the data and other content will appear. This can be done by setting the alignment of data within the cell.

  24. Specifying Cell Size and Alignment There are mainly two attributes “align” and “valign” for specifying horizontal and vertical cell alignment. By default the table content are aligned(left, middle) and the table heading are aligned ( center,middle)

  25. Including Caption In A Table A caption is an important element for a table and is used to summarize table contents. A caption is added in a table using the <caption> tag just below the opening <table> tag. Syntax <CAPTION ALIGN=TOP I BOTTOM I LEFT I RIGHT> CAPTION TEXT </CAPTION>

  26. CELL SPACING AND CELL PADDING • Cell spacing is defined as the amount of space between two adjacent cells. Inclusion of these spaces makes the table contents much easier to read. • Cell padding is defined as the amount of space between cell border and cell content. <TABLE CELLSPACING=12 CELLPADDING=10>

  27. ADVANTAGES OF USING TABLE • One of the greatest advantages of tables is that you data is much easier to read when structured properly on the page. A properly designed table gives your reader a clear and quick way to evalute your content. • A table can contain many different types of content other than just text such as lists, forms, nested table images, preformed text and paragraphs.

  28. ADVANTAGES OF USING TABLE • All search engine support tables so you do not need to worry about them not indexing your site. • Their best feature is that they fix all the problems with frames

More Related