Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
Lecture 10 Web Programming
-
Upload
aaron-higgins -
Category
Documents
-
view
19 -
download
1
description
Transcript of Lecture 10 Web Programming
![Page 1: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/1.jpg)
Lecture 10Web Programming
![Page 2: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/2.jpg)
Introducing Web Tables
![Page 3: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/3.jpg)
Tabulating items
Adv. of Tables: Better readability More flexibility More efficient to explain information than plain text
![Page 4: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/4.jpg)
Another snapshot of HTML Table
Helps us to layout thehtml page in a nice
format
![Page 5: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/5.jpg)
What are the questions we need to ask ourselves?
What is the tag for that? <table>…</table>
A Table must have rows and each of the rows must be divided into cells add a row
• <tr>…</tr> add a cell (column)
• <td>…</td>
That’s it! Let’s build a simple table then…with 2 rows and 2 cells in each row
How to create HTML Tables?
![Page 6: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/6.jpg)
<table><tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr><tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
Code to create HTML Table
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
Sometimes, this looks nice. But sometime, you may need the actual lines
![Page 7: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/7.jpg)
<table border=“1”><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
Actual lines = border (attribute)
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
How can I add borders?
Width of the borders
![Page 8: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/8.jpg)
Let’s build a simple table with 3 rows and 2 cols.
Simple Exercise #1
![Page 9: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/9.jpg)
How about headings in this table?
row 1, cell 1
row 2, cell 2row 2, cell 1
row 1, cell 2
Heading 1 Heading 2
<table border=“1”> <tr>
<th>Heading 1</th>
<th>Heading 2</th></tr><tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr><tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
Tag for heading??
<th> … </th>
cell content is made bold and centered
![Page 10: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/10.jpg)
Spanning rows and columns A spanning cell is a single cell that occupies more
than one row or one column in the table
Attributes colspan: allows a cell span multiple columns rowspan: allows a cell span multiple rows
More design of tables
fruits
apple orange
![Page 11: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/11.jpg)
COLSPAN: allows a cell span multiple columns
example <table border=“1”>
<tr>
<td colspan=“2”> fruits </td>
</tr>
<tr>
<td> apple </td>
<td> orange </td>
</tr>
</table>
How to create column span?
fruits
apple orange
fruits
apple orange
<th
</th>
![Page 12: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/12.jpg)
ROWSPAN: allows a cell span multiple rows
example <table border=“1”>
<tr>
<th rowspan=“2”> contact </th>
<td> phone </td>
</tr>
<tr>
<td> fax </td>
</tr>
</table>
ROWSPAN
![Page 13: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/13.jpg)
Creating a Table caption Caption is a part of Table describing the
content of the table in a line
To create a table caption, add the caption element directly below the opening <table> tag with the syntax
<caption> content </caption>
where content is the content of the table caption you want to display in the webpage
![Page 14: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/14.jpg)
<caption> … </caption>
example<table border=“1”>
<caption> My contact info </caption>
<tr>
<th rowspan=“2”> contact </th>
<td> phone </td>
</tr>
<tr>
<td> fax </td>
</tr>
</table>
Caption code
![Page 15: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/15.jpg)
Positioning a Table Caption
By default, table captions are placed at the top
Change the placement using “align” attribute
<caption align =“position”> content </caption>
where position can betop / bottom / left / right
![Page 16: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/16.jpg)
Hands-on Practice #1
![Page 17: Lecture 10 Web Programming](https://reader036.fdocuments.us/reader036/viewer/2022062422/5681329c550346895d993a18/html5/thumbnails/17.jpg)
Hands-on Practice #2
All times listed in central time