Tables Page layout Tables Tables are the bread and butter of HTML page layout. Youve made nice Office tables right? Well, same sort of thing, but we are.

Slides:

Advertisements

Similar presentations

The Web Wizards Guide to HTML Chapter Six Tables.

Advertisements

Using HTML Tables Presenting Information & Layout Control.

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.

HTML Tables Introduction to Tables Introduction to Tables Table Format Table Format Table Captions Table Captions Table Example Table Example Excercise.

Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.

Internet Basics & Way Beyond!

56 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Tables HTML Tables are used to control Web page layout for both text and graphics +In HTML,

Introducing Web Tables

Exploring the Internet Creating web pages with 2-d layout Instructor: Michael Krolak Instructor: Patrick Krolak See also

1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.

AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash.

HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.

INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.

HTML Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.

1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row.

XHTML Tables. Tables: Allow us to display information on the page in a uniform fashion. Work well for organizing groups of words, images, and links. Are.

XHTML1 Tables N100 Creating a Simple Web Page. XHTML2 Creating Basic Tables Tables are collections of rows and columns that you use to organize and display.

Identifies the Structure Table Row Column 1 Table Heading Column 2.

CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.

Tables Teppo Räisänen LIIKE/OAMK The Role of a Table Tables are quite common in computing systems In XHTML tables are used for presenting tabular.

ITP 104.  While you can do things like this:  Better to use styles instead:

CO1552 – Web Application Development Lists, Special Characters, and Tables.

Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.

HTML II ECT 270 Robin Burke. 2 Outline Review Images text flow links Image maps Colors Tables.

HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.

>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.

10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08.

Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.

IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure

Html Tables Basic Table Markup. How Tables are Used For Data Display Tables were originally designed to display and organize tabular data (charts, statistics,

Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.

TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.

Tables Web Authoring. This kind of a table THISIs aTABLE THISIs aTABLE THISIs aTABLE THISIs aTABLE.

CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.

Lesson 7 - Structured Block Elements Lists. Unordered Lists list item. list item.

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …

Lesson 7. Tables Table Tags and Attributes Tables HTML tables are used in two main ways: 1.To organize tabular data in a familiar spreadsheet-like way.

Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.

CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor

CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.

Using Tables for Layout INP150 Session #8. Layout Map out your page Design with paper and pencil Determine number of rows and columns you need Determine.

20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.

Web Page Tables GMU-Teaching with Technology. Table Characteristics: Looks like a news page Contains columns and rows.

Doing TABLES Creating Tables in HTML. Start creating the table by using the Table container tag.

©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.

CNIT 131 HTML5 - Tables.

Website Development & Management

Yourfriendmanoj.wordpress.com Fb/yourfriendmanoj

Working with Tables: Module A: Table Basics

>> HTML: Tables.

LAB Work 02 MBA 61062: E-Commerce

HTML Tables CS 1150 Spring 2017.

Tutorial 5 Working with Tables and Columns

Creating Tables Steps for creating a Table Important Facts about Table

HTML/XML HTML Authoring.

Creating Tables Steps for creating a Table Important Facts about Table

Web Design and Development

Creating Tables in HTML

If You Know Nothing About HTML, This is Where You Start.

Creating Tables in HTML

H T M L A B E S X P I N D.

Site Development Foundations Lesson 6

Creating Tables Steps for creating a Table Important Facts about Table

Presentation transcript:

Tables Page layout Tables Tables are the bread and butter of HTML page layout. Youve made nice Office tables right? Well, same sort of thing, but we are mostly going to use them in a different way. Click PgDown key to turn pages

Tables Page layout How to make a table 1. Any table consists of a number of rows and columns. Need we say more? Lets cut the chit-chat and do it. Cell TL Cell TR Cell BL Cell BR Nb: you guessed that TR means row, and TD means datacell right?

Tables Page layout

Tables Page layout Table width settings 3. Note that table sizes are not in cms! Not these strange sizes again? Yep. this makes the table the whole width of the window this makes it 300 pixels wide. PC Screens usually range from 600 to 1200 pixels wide. Nb: Table size is elastic by default, ie: they are only as big as need be.

Tables Page layout More table settings 4. Table tag settings default to: border=0 cellspacing=1 cellpadding=1 align=left <table border=4 width=100% cellspacing=5 cellpadding=5 align=center> Nb: HTML is pretty forgiving and the page will probably render no matter what you type tag settings are known as attributes tag attributes should ideally have quotes as above

Tables Page layout Individual cell settings 5. cell tag settings default to: align=left valign=center and have no colour All do the obvious or

Tables Page layout Laying the page out 6. It is a fact of life that with HTML you cant put things exactly on the page where you want them--as you can with desktop publishing. Using invisible tables (border setting of zero) is the main method of controlling placement of page elements. Heres an example:

Tables Page layout

Tables Page layout A few tips 8. Keep the layout simple Use a hierarchy of element size. Large headings, medium subheadings, small text etc Tables can be nested, ie tables within tables Design inclusively: use 640 wide pages Keep content BRIEF Keep related things together Use colour with care Remember white space! Use page margins. The best way is an invisible table centred and 90% of the width of the window. Try to create some basic page alignment