table with css1- open new file in notepad++ then save it as (.html) extension. after that, enter...
TRANSCRIPT
![Page 1: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/1.jpg)
Table with CSS
Lab 5
![Page 2: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/2.jpg)
Layout
Tables 01
Row02
Column03
Style04
![Page 3: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/3.jpg)
Tables:
![Page 4: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/4.jpg)
Create Headings in a Table :
![Page 5: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/5.jpg)
Add border:
![Page 6: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/6.jpg)
Spanning Rows and Columns:
![Page 7: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/7.jpg)
Alignment : may be “bottom” , “top” , “center” , “left” or “ right”
Creating table and caption:
![Page 8: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/8.jpg)
Marking row groups
![Page 9: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/9.jpg)
Marking Column Groups:
![Page 10: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/10.jpg)
Marking Column Groups:
![Page 11: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/11.jpg)
Adding a Table Summary:
![Page 12: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/12.jpg)
Cell Spacing & Cell Padding:
![Page 13: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/13.jpg)
Set the Width and Height of the Table to
a Specific Value
![Page 14: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/14.jpg)
Output:
![Page 15: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/15.jpg)
Set the Width of Columns
![Page 16: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/16.jpg)
Set the Height of Row
![Page 17: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/17.jpg)
Set the Table Frame
<table border="value" frame="type"> ... </table>
![Page 18: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/18.jpg)
Set the Table Rules <table border="value" rules="type"> ... </table>
![Page 19: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/19.jpg)
Control the Horizontal and Vertical Alignment
![Page 20: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/20.jpg)
Control the Horizontal and Vertical Alignment
![Page 21: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/21.jpg)
Formatting Tables with CSS
![Page 22: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/22.jpg)
Formatting Tables with CSS
![Page 23: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/23.jpg)
SUMMARY
![Page 24: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/24.jpg)
Evaluation:
![Page 25: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/25.jpg)
1- Open new file in notepad++ then save it as (.html) extension.
After that, enter your name and section within file as comment.
2- Write the code you need to display your webpage like Figure(
1)
3- Insert Tulips.jpg into vacation cell then set the height to 70 and
width to 750.
Evaluation Instruction:
![Page 26: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/26.jpg)
Hints:
• border = "3".
• cellspacing="5".
• cellpadding="7".
• border color: green
• border style: dashed
• width and height of the table is 70% .
image src: https://www.gulf-up.com/c/1508604669841.jpg
Cont..:
![Page 27: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/27.jpg)
Extra at home
Solve as individual
![Page 28: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/28.jpg)
Extra:
![Page 29: Table with CSS1- Open new file in notepad++ then save it as (.html) extension. After that, enter your name and section within file as comment. 2- Write the code you need to display](https://reader035.vdocuments.us/reader035/viewer/2022081521/5e9ca7beb7d30b3700166ed5/html5/thumbnails/29.jpg)
Thank you