Using tables in HTML Goes in order with Examples at my site.

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

1 Tables and Lists. 2 Are Tables still needed? Tables were once used to help structure and style our pages CSS now replaces most of the old uses for tables.
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.
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
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.
Cos 125 Day 22. Agenda Assignment 6 Not corrected Waiting for tune-ins Assignment 7 is posted Assignment 7 Due April 2PM Left to do 1 Assignments.
Cos 125 Day 24. Agenda All students meeting 7 Pm Monday, April 19 UMS Strategic Plan Assignment #7 Posted Due April 20 Two (one?) more to go Quiz Four.
Tables And Lists. Slide 2 Lecture Overview Learn about the basics of tables Create simple 2-dimensional tables Format tables Create tables with complex.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
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.
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.
Tutorial #8 – Creating Data Tables. Tutorial #6 Review – Layouts Two Column Fixed Width, Three Column Fixed Width Class VS. ID Container Universal Selector.
Lesson 6. Links in HTML Computer Science Welcome to Virtual University in Pakistanhttp://
Lecture 16: SQL and HTML tables
HTML Tables. Start of page where we want to place a table.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
Identifies the Structure Table Row Column 1 Table Heading Column 2.
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.
Bayu Priyambadha, S.Kom. for long documents, you can even have links to other locations in that same document  … where ident is a variable for identifying.
How to create tables in HTML…
INTRODUCTORY Tutorial 7 Creating Tables. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Discern the difference between data tables and.
Principles of Web Design 6 th Edition Chapter 10 – Data Tables.
HTML basics exercises.
Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 2.
Getting Started with HTML Please use speaker notes for additional information!
HTML B OOT C AMP Chapter 10 Tables Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved.
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
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.
Tables Web Authoring. This kind of a table THISIs aTABLE THISIs aTABLE THISIs aTABLE THISIs aTABLE.
Tables with XHTML Please use speaker notes for additional information!
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
HTML Tables The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into.
26 HTML Tables … surround table … surround each row … surround each cell … like, but bold and centered by default (for table headings) … table title No.
How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
COS 125 DAY 14. Agenda  Assignment 6 DUE  Assignment 7 Posted Due March 9:35 AM  Quiz 2 will be on March 30 Chapters M/C and 4 Short.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
Tables creating a table within a web page. What makes up a table? Columns Rows.
TABLES IN HTML No, not that kind of table!! THIS KIND!!
This shows a table with two rows. In each row there are two cells. I have put borders around them. Note I did not use th.
1 R3 R1 R5 R4 R6 R2 B B A A Looking at the Code Under the View menu Select Source.
HTML.
CSE 154 Lecture 17: HTML tables.
Advanced Tables.
H T M L A B E S X P I N D.
>> HTML: Tables.
Loops BIS1523 – Lecture 10.
HTML Tables CS 1150 Spring 2017.
HTML Tables.
Chapter 7 Tables.
H T M L A B E S X P I N D.
Session I Chapter 10 - How to Work with Tables
Table CSS Create a new CSS called tablestyle.CSS Green Background
Lecture 25: SQL and HTML tables
TABLES IN HTML No, not that kind of table!! THIS KIND!!
HTML Level II (CyberAdvantage)
Implementing Tables to Hold Data in HTML
Usually use background-color:
COMS 161 Introduction to Computing
H T M L A B E S X P I N D.
Site Development Foundations Lesson 6
ITI 134: HTML5 Desktop and Mobile Level II
Principles of Web Design 5th Edition
Lesson 5: HTML Tables.
H T M L A B E S X P I N D.
Hypertext Markup Language Table 11th Lecture
Presentation transcript:

Using tables in HTML Goes in order with Examples at my site. <table> is the tag to start a table. Then within the table you can set up rows and columns to make sells. <tr> is to establish rows and <td> breaks the rows up into cells. It should be noted that the structure here is the same so basically dividing up the rows makes columns.’ This table does not have any borders to make the cells stand out.

In the css style I have said that I want borders around the table and around the <td> cells. Note above that there is a line around each of the cells and then a line around the whole table. The border is set up to be 1px side and to be solid and black. Look up borders at W3schools or another resource. Be sure to look at the older way of doing it on the third example.

Note that this time I did table and td as separate styles because I wanted them to be different. The table has a thicker border 2px and it is solid and blue. Around the cells <td> there is a thinner 1 px that is dotted and red.

I zoomed it so you could better see the borders

This shows how you can center the table This shows how you can center the table. I did that with the margin-left and margin-right in css. The text-align center applies to the text that is going inside the cells. Here I used <th> instead of <td> for the top row of the table because I am putting column headers there. Making them a header means they will be bold and centered.

From W3 schools

Just an alternate way to do borders so you address each attribute separately.

Too big to fit – go and look it up at my site. Note padding Note data alignment in cells.

Again incomplete, look at the original and let me know if you have questions

Please be sure to look at how the tbody etc works Please be sure to look at how the tbody etc works. The code really needs to be checked out as a whole.

There are 6 columns and My schedule should be over all 6 so I used colspan = “6” The day on Wednesday I am not on campus so I want to span 4 rows with that message so I use rowspan = “4”. The same thing happens on Friday. When I get to 11 I see that Monday, Tuesday and Thursday all have a rowspan of 2 and the only one that does not use a span is 11 and when I get to 12:30 that is the only one that needs an entry as well. Look at the last one on your own – too big!