Tables in HTML. Table Tag HTML tables always begin and end with a table tag. Syntax:

Slides:



Advertisements
Similar presentations
HTML TABLES EXPLAINED. What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields,
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.
Designing Web Pages Tables part one. Using Tables for Page Layout 2.
Tutorial 5 Working with Web Tables
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
Internet Basics & Way Beyond!
Working with Web Tables
Chapter 4 – Intermediate HTML 4 Outline 4.1 Unordered Lists 4.2 Nested and Ordered Lists 4.3 Basic HTML Tables 4.4 Intermediate HTML Tables and Formatting.
Tutorial 4: Designing a Web Page with Tables
XP 1 Designing a Web Page with Tables Tutorial 4 Creating a News Page.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
Introducing Web Tables
HTML TABLES Cyndi Hageman. Tables   Attributes Name or id – used to identify the table Border = set this to determine if there is a border and the size.
XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.
Using HTML Tables.
Tables. Tables2 Terminology Caption Headings Cell Data.
1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.
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.
Images and Tables. Displaying Image Attributes: SRC= " mypic.gif " – Name of the picture file SRC= " pic/mygif.jpg " – Name of file found in pic directory.
What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields, other tables, etc. Tables.
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 Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.
Using HTML to Create Tables in Web pages Connie Lindsey November 2005.
HTML Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.
Chapter 5 Working with Tables. Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels.
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.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
How to create tables in HTML…
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.
Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)
Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.
CNIT 132 – Week 7 HTML - Tables. Tables on the World Wide Web A table can be displayed on a Web page either in a text or graphical format. A text table:
Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to:  Create tables.
HTML B OOT C AMP Chapter 10 Tables Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.
HTML: Tables & Frames Internet Technology.
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.
Kevin Murphy Introduction to Tables Masters Project CS 490.
ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables Created as a way to present rows and clumns of data.
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.
Tables lab5. Drawing a table Tables are the web designer’s best friend and worst enemy. To draw a table we will use:  tag  for raw  tags for column.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.
1 Tables attributes. 2 Table attributes: border Activates border around cells Syntax: – where “n” is a value in pixels which controls the “thickness”
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.
Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.
How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.
LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.
REEM ALMOTIRI Information Technology Department Majmaah University.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
Web111a_chapt04.ppt HTM: Section 4 Tables Table Types Text table elements Easy to use Use fixed-font text (font family monospace) Andale Mono Courier Monaco.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
LAB Work 02 MBA 61062: E-Commerce
Introduction to HTML.
H T M L A B E S X P I N D.
Using HTML Tables SWBAT: - create tables using HTML
TABLES.
HTML Tables & Frames Internet Technology.
H T M L A B E S X P I N D.
Site Development Foundations Lesson 6
Lesson 5: HTML Tables.
H T M L A B E S X P I N D.
HTML Tables & Frames Internet Technology.
Presentation transcript:

Tables in HTML

Table Tag HTML tables always begin and end with a table tag. Syntax:

attributes The table tag itself may include certain attributes that control how the whole table will appear. These attributes are listed below: Align,Bgcolor,Border,Cellpadding,cellspacing, Width

1. ALIGN-This specifies the horizontal alignment of the table. The possible values are left, center and right, with left being the default. 2.BGCOLOR-Sets the background colour for the table, using either a colour name (eg black), or by using a hexadecimal colour code (eg #FF00FF). 3.BORDER-Controls the thickness of the line around the table and its cells. Setting this attribute to 0 can hide the border. Most browsers will default to a border width of 0, though some older browsers will default to a thin border appearing. 4.CELLPADDING-The amount of blank space between the cell contents and the edge of the cell. 5.CELLSPACING-The amount of blank space between cells in the table. 6.WIDTH-The width of the table can be specified by stating the number of pixels (eg 500 pixels wide) or by specifying how much of the available space will be taken up by the table (eg 80%)

example

Caption Tag The caption tag, usually placed after the opening table tag, provides a caption to be displayed above or below the table. The only attribute of the caption tag is ALIGN= which determines if the caption will be displayed at the “top” or “bottom” of the table.

Table Row Tag Rows are defined using the table row tag. The closing tag may be omitted since a new tag implies that the previous row has ended, though it is usually included. It has two attributes: ALIGN= Sets the default horizontal alignment for contents of the cells within the row (left, center or right) VALIGN= Sets the default vertical alignment for contents of the cells in the row (top, middle or bottom)

Table Data Tag Within each row, the cells need to be specified with the table data tag. Like the table row tag, the closing tag for table data can be left off. The following attributes may be used: ALIGN=, BGCOLOR, COLSPAN, HEIGHT, ROWSPAN, VALIGN, WIDTH,

ALIGN- Sets the horizontal alignment for the contents of the cell (left, center or right). Left is the default. BGCOLOR-Sets the colour of the cell’s background (overrides the table background colour) COLSPAN-Makes the cell span the specified number of columns. This is similar to merging the cell with the cells to the right. HEIGHT-Specifies the height (in pixels) for the cell. ROWSPAN-Merges the cell with the cells below with the value representing the number of rows spanned. Similar to the COLSPAN attribute. VALIGN-Sets the vertical alignment for the contents of the cell (top, middle or bottom). Middle is the default. WIDTH-Sets the width of the cell in pixels or % of the table’s width.