slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables PowerPoint Presentation
Download Presentation
Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables

Loading in 2 Seconds...

play fullscreen
1 / 11

Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables - PowerPoint PPT Presentation


  • 127 Views
  • Uploaded on

Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables Table, Cell, Row Attributes Using Tables for Alignment When Tables Go Wrong?. Objectives Insert a table into an HTML document Manipulate the style, color, and width of a table’s border

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 'Tables: Data in Rows and Columns What is Table? How Tables are Used? Designing Tables' - xander-finley


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
slide1

Tables: Data in Rows and Columns

    • What is Table?
    • How Tables are Used?
    • Designing Tables
    • Table, Cell, Row Attributes
    • Using Tables for Alignment
    • When Tables Go Wrong?
slide2

Objectives

    • Insert a table into an HTML document
    • Manipulate the style, color, and width of a table’s border
    • Set the size of a table’s margin, cell spacing, and cell padding
    • Change a table’s width within the browser pane and cell width within the table
    • Use background colors within a table
    • Float text to the right or left of a table
    • Place captions above and below a table
    • Using Tables for Alignment
    • When Tables Go Wrong?
what is table

Tables consist of horizontal rows and vertical columns which can be formatted according to your needs.

The intersection of a row and a column is called a cell.

HTML cells contain either data, numbers, text, an image -or header information describing the data in a column or row.

What is Table?

C

L

U

M

N

ROW

how tables are used

Organize information in a row and column format

(Present tabular information)

Present any type of information for which you want a lot of control over the positioning the material

(Newspaper-like appearance; Control Layout)

How Tables are Used?

slide5

Table Containers

<table>....</table>  encloses the table

<th>....... </th>  defines the table headers

<tr>.........</tr>  defines the table rows

<td>.........</td>  surrounds the actual table data

<caption>...</caption>  allows you to place a caption either above or below the table.

The latest HTML specifications added five new table tags that let you format table columns and format and scroll portions of long tables

<tbody>....</tbody> (*)  identifies a scrollable area of a table

<thead>.....</thead> (*)  appears above the scrolling body

<tfoot>.......</tfoot> (*)  appears belove the scrolling body <colgroup>..</colgroup> (*) provides means for combining a group of columns in a table

<col/> (*)  allows you to control the appearance or attribute specifications for one or more tables

designing tables

<TABLE>

<TR>

<TD>Row 1, Column 1</TD>

<TD>Row 1, Column 2</TD>

</TR>

<TR>

<TD>Row 2, Column 1</TD>

<TD>Row 2, Column 2</TD>

</TR>

</TABLE>

1. For each ROW, begin with <TR>, end with </TR>

2. For each CELL in a Row, begin with <TD>, end with </TD>3. No problem if you have 1 ROW, many CELLS.4. When you have more than 1 ROWS, might be a Problem. Why?Because, number of CELLS must be SAME at each ROW. Rule of MATRIX.

Cell 1 : Row 1, Column 1

Cell 2 : Row 1, Column 2

Cell 3 : Row 2, Column 1

Cell 4 : Row 2, Column 2

Designing Tables

table row cell attributes

< Table

width = "100%“ (you may use percentage of window or pixel ) height = “5"

cellspacing = "3"

cellpadding = "3"

border = "2"

bordercolor = "#008000"

background = "bilkent.gif"

bgcolor = "#C0C0C0“

align = "right"

rules(*) = “row”  controls the border around individual cell (none: just outside, column: just columns)

frame(*) = “border” which sides of a table’s border are visible [box, void, above, below, hsides, vsides, lhs (left hand side), rhs.]

>

Table, Row, Cell Attributes

table row cell attributes1

< tr

width = "100%“ (you may use percentage of window or pixel ) height = “5"

border = "2"

bordercolor = "#008000"

background = "bilkent.gif"

bgcolor = "#C0C0C0“

align = "right"

valign = “right”

>

< td

width = "100%“ (you may use percentage of window or pixel ) height = “8"

border = "2"

bordercolor = "#008000"

background = "bilkent.gif"

bgcolor = "#C0C0C0“

align = "right"

valign = “right”

>

Table, Row, CellAttributes

using tables for alignment

Q1. Assume that

write the name of the lecture on Left alignment. write the date on Right alignment.BOTH must be on the sameLINE.

Once you give an ALIGMENT property to a line, it will set the whole LINE’s property.

So, you need to GIVE 2 different ALIGNMENT PROPERTY at 1 LINE.

Using TABLES is the best way to solve this Problem.

<table width=“100%”>

<tr>

<td width=“50%” align=“left”>Lecture 63242</td>

<td width=“50%” align=“right”> 25.10.2004</td>

</tr>

</table>

Using Tables for Alignment

using tables for alignment1

Q2. Assume that

insert an image named bilkent.gif. write the date near the image. They must be vertically CENTERED as shown in the figure.

Once you insert an image, write a text after it, the text’s bottom will be same level as image’s one. But, you want it to be centered.

Using TABLES is the best way to solve this Problem.

<table width=“100”>

<tr>

<td width=“70”> <img src=“bilkent.gif”></td>

<td width=“30” valign=“middle”>25.10.2004</td>

</tr>

</table>

25.10.2004

Using Tables for Alignment

when tables go wrong

If you don’t CLOSE your Table TAGS; table, tr, td

  • Assume that you want to build a table, with 2 rows, and 3 columns.The browser will understand this table’s dimensions by TAGS, so they must be defined correctly
  • If the CELL numbers are not equal at each ROW.
  • If you create a COLUMN, it must be valid for each ROW.?? Is there any way to OMIT, MERGE cells ??
  • YES, you should merge cells by using COLSPAN and ROWSPAN tag attributes.
  • However, you don’t need to use them with non-authoring tools.

When Tables Go Wrong?