Lecture 10 web programming
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

Lecture 10 Web Programming PowerPoint PPT Presentation


  • 65 Views
  • Uploaded on
  • Presentation posted in: General

Lecture 10 Web Programming. Introducing Web Tables. Tabulating items. Adv. of Tables: Better readability More flexibility More efficient to explain information than plain text. Another snapshot of HTML Table. Helps us to layout the html page in a nice format.

Download Presentation

Lecture 10 Web Programming

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Lecture 10 web programming

Lecture 10Web Programming


Introducing web tables

Introducing Web Tables


Tabulating items

Tabulating items

  • Adv. of Tables:

  • Better readability

  • More flexibility

  • More efficient to explain information than plain text


Another snapshot of html table

Another snapshot of HTML Table

Helps us to layout the

html page in a nice

format


How to create html tables

How to create HTML Tables?

  • 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


Code to create html table

Code to create HTML Table

<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>

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

Sometimes, this looks nice. But sometime, you may need the actual lines


Actual lines border attribute

Actual lines = border (attribute)

How can I add borders?

<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>

Width of the borders

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2


Simple exercise 1

Simple Exercise #1

  • Let’s build a simple table with 3 rows and 2 cols.


How about headings in this table

How about headings in this table?

<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>

Heading 1

Heading 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

Tag for heading??

<th> … </th>

cell content is made bold and centered


More design of tables

More design of tables

  • 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


How to create column span

How to create column span?

  • 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>

<th

</th>


Rowspan

ROWSPAN

  • 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>


Creating a table caption

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


Caption code

Caption code

  • <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>


Positioning a table caption

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 be

top / bottom / left / right


Hands on practice 1

Hands-on Practice #1


Hands on practice 2

Hands-on Practice #2

All times listed in central time


  • Login