lecture 10 web programming
Download
Skip this Video
Download Presentation
Lecture 10 Web Programming

Loading in 2 Seconds...

play fullscreen
1 / 17

Lecture 10 Web Programming - PowerPoint PPT Presentation


  • 87 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lecture 10 Web Programming' - aaron-higgins


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
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?
  • A Table must have rows and each of the rows must be divided into cells
    • add a row
    • add a cell (column)
  • 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

row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

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?

row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

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?

Heading 1Heading 2
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

Heading 1

Heading 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

Tag for heading??

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

fruits
apple orange

rowspan
ROWSPAN
  • ROWSPAN: allows a cell span multiple rows
  • example

contact phone
fax

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

tag with the syntax

where content is the content of the table caption you want to display in the webpage

  • example
  • content

    My contact info
    contact phone
    fax

    positioning a table caption
    Positioning a Table Caption

    By default, table captions are placed at the top

    Change the placement using “align” attribute

    content

    where position can be

    top / bottom / left / right

    hands on practice 2
    Hands-on Practice #2

    All times listed in central time

    ad