際際滷

際際滷Share a Scribd company logo

Working With Tables in HTML

Download as PPTX, PDF
Shehzad Yaqoob
Shehzad Yaqoob

Metadata is information about data that is not displayed on an HTML page. The <meta> tag provides metadata such as page descriptions and keywords. Metadata can be used by browsers, search engines, and other web services. Tables are used to arrange information and create page layouts using hidden tables. Frames allow displaying multiple HTML documents in the same browser window, with each document in its own independent frame. Framesets define the layout of frames using rows and columns.

1 of 24
Download to read offline
Working With Tables in HTML
Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. Example
<Address> Tag. <Blockquote >Tag. <Pre> Tag. Address Block quote Pre
4 TABLE
Tables are used on websites for two major purposes: 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. Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4 Row 3 Cell 1 Row 3Cell 2 Row 3 Cell 3 Row 3Cell 4 Row 4Cell 1 Row 4Cell 2 Row 4Cell 3 Row 4Cell 4
6 The table element starts with <TABLE> tag & ends with a</TABLE> tag. Elements that can appear between these tags are as follows: Caption element containing the tables description. <CAPTION> tables description </CAPTION> The table row that creates a horizontal row of cells and contains table headings & table data. <TR> <TH> This is heading </TH> <TD> This is data </TD> </TR> The table data element to create each individual cell <TD> This is cell 1 </TD> <TD> This is cell 2 </TD> The table heading element creates the heading cells. <TH> This is heading </TH> View Example
<html> <body> <table> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </body> </html>
8 Alignment of the entire table <TABLE ALIGN=value> value can be left, center or right Width of the entire table <TABLE WIDTH=number> <TABLE WIDTH=percent> Table border <TABLE BORDER=number> Spacing between each neighboring cell <TABLE CELLSPACING=5> Space between the cells content & the cell border <TABLE CELLPADDING=10> View Example 1 View Example View Example View Example View Example View Example 2
9 Coloring table with BGCOLOR attribute <TABLE BGCOLOR=color name/color value> View Example
10 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT CELLSPACES CELLSPADDING
11 View Example <TD COLSPAN=4> text </TD>
12 View Example <TD ROWSPAN=5> text </TD>
13
14 1 2 3 4 1. Limegre en 2. Cornsilk 3. Pink 4. Cyan
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page
The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. 16
Frames are created using the FRAMESET tag The attributes are: Rows Cols
The attributes of the FRAME element include: name src noresize scrolling
<frameset cols="25%,75%"> <frame src=/slideshow/tables-47176865/47176865/"frame1.html" /> <frame src="frame2.html" /> </frameset> 19
<frameset cols="25%,50%,25%"> <frame src=/slideshow/tables-47176865/47176865/"frame1.html" /> <frame src="frame2.htm" /> <frame src="frame3.htm" /> </frameset> 20
<frameset rows="25%,50%,25%"> <frame src=/slideshow/tables-47176865/47176865/"frame1.htm" /> <frame src="frame2.htm" /> <frame src="frame3.htm" /> </frameset> 21
<frameset rows="50%,50%"> <frame noresize="noresize" src=/slideshow/tables-47176865/47176865/"frame1.html" /> <frame noresize="noresize" src="frame2.html" /> </frameset> 22
<html> <body> <iframe src=/slideshow/tables-47176865/47176865/http:/www.google.com"></iframe> </body> </html> 23
Nested frames Frame attributes

More Related Content

Working With Tables in HTML

  • 2. Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. Example
  • 3. <Address> Tag. <Blockquote >Tag. <Pre> Tag. Address Block quote Pre
  • 5. Tables are used on websites for two major purposes: 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. Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4 Row 3 Cell 1 Row 3Cell 2 Row 3 Cell 3 Row 3Cell 4 Row 4Cell 1 Row 4Cell 2 Row 4Cell 3 Row 4Cell 4
  • 6. 6 The table element starts with <TABLE> tag & ends with a</TABLE> tag. Elements that can appear between these tags are as follows: Caption element containing the tables description. <CAPTION> tables description </CAPTION> The table row that creates a horizontal row of cells and contains table headings & table data. <TR> <TH> This is heading </TH> <TD> This is data </TD> </TR> The table data element to create each individual cell <TD> This is cell 1 </TD> <TD> This is cell 2 </TD> The table heading element creates the heading cells. <TH> This is heading </TH> View Example
  • 8. 8 Alignment of the entire table <TABLE ALIGN=value> value can be left, center or right Width of the entire table <TABLE WIDTH=number> <TABLE WIDTH=percent> Table border <TABLE BORDER=number> Spacing between each neighboring cell <TABLE CELLSPACING=5> Space between the cells content & the cell border <TABLE CELLPADDING=10> View Example 1 View Example View Example View Example View Example View Example 2
  • 9. 9 Coloring table with BGCOLOR attribute <TABLE BGCOLOR=color name/color value> View Example
  • 13. 13
  • 15. With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page
  • 16. The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. 16
  • 17. Frames are created using the FRAMESET tag The attributes are: Rows Cols
  • 18. The attributes of the FRAME element include: name src noresize scrolling
  • 19. <frameset cols="25%,75%"> <frame src=/slideshow/tables-47176865/47176865/"frame1.html" /> <frame src="frame2.html" /> </frameset> 19
  • 20. <frameset cols="25%,50%,25%"> <frame src=/slideshow/tables-47176865/47176865/"frame1.html" /> <frame src="frame2.htm" /> <frame src="frame3.htm" /> </frameset> 20
  • 21. <frameset rows="25%,50%,25%"> <frame src=/slideshow/tables-47176865/47176865/"frame1.htm" /> <frame src="frame2.htm" /> <frame src="frame3.htm" /> </frameset> 21
  • 22. <frameset rows="50%,50%"> <frame noresize="noresize" src=/slideshow/tables-47176865/47176865/"frame1.html" /> <frame noresize="noresize" src="frame2.html" /> </frameset> 22
  • 23. <html> <body> <iframe src=/slideshow/tables-47176865/47176865/http:/www.google.com"></iframe> </body> </html> 23