Creating table
-
Upload
christopher-olaya -
Category
Education
-
view
44 -
download
0
Transcript of Creating table
![Page 1: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/1.jpg)
CREATING LINKS
![Page 2: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/2.jpg)
TABLE• Tables allow you to organize and
arrange data into columns and rows. Tables also allow you to divide your page into section where you can place headers, footers and navigation links. Almost all Web sites are laid out using tables.
![Page 3: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/3.jpg)
TABLE• A table is made up of rows and
columns. You can place different elements in each cell like text, images and hyperlinks.
![Page 4: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/4.jpg)
Creating a TableTables arrange and organize content into columns and rows. Basically, they can be made via the following container tags: • <table></table>- tag that creates the table,
instructs the browser that a table is being made.
• <tr></tr> - tag that sets off each row in a table.
• <td></td> - tag that sets off each cell (column) in a row.
![Page 5: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/5.jpg)
Creating a TableTo set the width of your table, you can use the width attribute for the <table> tag.
For example, you can set the width like: <table width=“75%”>, this will instruct the browser to set the table width to 75% percent of the screen.You can also set the width through pixel, like <table width=“1000”>
![Page 6: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/6.jpg)
Attributes for <table></table>TagsAttribute Name Definition
align Indicates the horizontal alignment of the table (left, right, center)Ex. <table align=“center”></table>
background Indicates the background image of the tableEx. <table background=“redflower.jpg”></table>
bgcolor Indicates the background color of the tableEx. <table bgcolor=“red”></table>
![Page 7: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/7.jpg)
Attributes for <table></table>TagsAttribute Name Definition
border Indicates the thickness of the border in pixels Ex. <table border=“2”></table>
bordercolor Indicates the color of the borderEx. <table bordercolor=“red”></table>
width Indicates the width of the table in pixels or percent of the width displayed by the web browser.Ex. <table width=“800”></table>
![Page 8: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/8.jpg)
Attributes for <table></table>TagsAttribute Name Definition
cellpadding Indicates the distance (in pixels) between the contents of the cells and the border around it. Ex. <table cellpadding=“2”></table>
cellspacing Indicates the distance between the cells in pixelsEx. <table cellspacing=“2”></table>
height Indicates the height of the table in pixels or percent of the height displayed by the web browser.Ex. <table height=“800”></table>
![Page 9: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/9.jpg)
Example of Table tag code
![Page 10: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/10.jpg)
Modifying Table Rows <tr></tr>Specifically, rows appearance can be changed as well and can be done through their attributes. By default, the contents of table rows are aligned vertically.
Attribute Name Definition
align Indicates the horizontal alignment of the contents of the row. (left, center, right) Ex. <tr align=“center”></tr>
valign Indicates the vertical alignment of the contents of the row. (top, middle, bottom) Ex. <tr valign=“middle”></tr>
height
bgcolor
Indicates the height of the row in pixels Ex. <tr height=“200”></tr>
Indicates the background color of the row. Ex. <tr bgcolor=“red”></tr>
![Page 11: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/11.jpg)
Modifying Table Data <td></td>The appearance of <td></td> data on each cell can be changed through their attributes
Attribute Name Definition
align Indicates the horizontal alignment of the contents of the cell (left, center, right) Ex. <td align=“center”></td>
valign Indicates the vertical alignment of the contents of the cell. (top, middle, bottom) Ex. <td valign=“middle”></td>
height
bgcolor
Indicates the height of the cell in pixels Ex. <td height=“200”></td>
Indicates the background color of the cell. Ex. <td bgcolor=“red”></td>
![Page 12: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/12.jpg)
Modifying Table Data <td></td>The appearance of <td></td> data on each cell can be changed through their attributes
Attribute Name Definition
width Indicates the width of the table in pixels or percent of the width of the table Ex. <td width=“300”></td>
nowrap Inhibit word wrapping in the cellEx. <td nowrap></td>
colspan
rowspan
Merges multiple cellsEx. <td colspan=“2”></td>
Merges multiple rowsEx. <td rowspan=“2”></td>
![Page 13: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/13.jpg)
Activity: Write the codes for the following outputs.
![Page 14: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/14.jpg)
Example <tr>and <td> tag attributes
![Page 15: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/15.jpg)
Assignment Activity: To be posted in the FB group page.
Output Code
1. Asia a. Philippines
• Manila• Quezon• Rizal
b. Thailand• Bangkok• Phuket
2. Europe a. Italy
• Rome• Venice
b. United Kingdom• London• Nottingham
![Page 16: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/16.jpg)
Transitional Page
![Page 17: Creating table](https://reader036.fdocuments.us/reader036/viewer/2022062522/58736a821a28abe7648b7a83/html5/thumbnails/17.jpg)
Backdrops:- These are full sized backdrops, just scale them up!- Can be Copy-Pasted out of Templates for use anywhere!
www.animationfactory.com