HTML TABLES EXPLAINED

What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields, other tables, etc. Tables are made up of rows and columns. --Rows are horizontally arranged cells --Columns are vertically arranged cells 1 ROW1 COLUMN

TABLE: Components Basic HTML table tags: o required o Defines the beginning and end of the table o required o Table Row - Defines the beginning and end of a horizontal row. o required o Table Cell - Defines an individual cell. Cells are always placed inside a row. td stands for table data. Code Browser View

TABLE: Components Cont. Additional HTML table tags: o optional o Defines a table header row. Used instead of td. o Text is bold & centered within the cell o optional o Sets a caption for the table. Goes after the table tag but not inside tr or td. There should be only one caption per table. Appears centered above the table. Code My Schedule Period Class 1st PE 2nd Math PeriodClass 1stPE 2ndMath Browser View My Schedule

TABLE: Tag attributes Attributes that can be added to table tags: o Table Border optional o Table border attribute dictates border thickness o Example: o 0 = no border & larger numbers = thicker borders o No border defined = no border viewable o bordercolor can be added to change the color of the table border. Border must be >0 to see the color o Example: o Table Width & Height optional o Width & Height can be defined in the open table tag o Example: o The height attribute is widely supported, but isn't actually part of the official HTML standard. It may not always work as you expect. o If no size values are specified, the browser will decide on an appropriate size. Results will vary between browsers.

TABLE: Tag attributes cont. Additional attributes that can be added to table tags: o Cell Padding optional o Defines the space inside each cell, i.e. the space between the edges of the cell and the content within it. o Example: o Cell Spacing optional o Defines the space between cells. If a border is used, the spacing will widen the border. o Example: o These attributes apply to the entire table - you can't specify spacing or padding for individual cells.

TABLE: Tag attributes cont. Attributes that can be added to th, tr, & td tags: o Alignment optional o Alignment can be added to the table, tr, th, & td tag. o If applied to the table tag, the entire table will align. o If applied to the tr tag, the entire row will align. o If applied to the th or td tag, just the cell will align. o Alignment options: left, center, & right o Contents will left align by default Code Test1 Test2 Test3 Test4 o Column & Row span optional o Column span (colspan) is added to a th or td tag o Row span (rowspan) can added to the tr tag Code Heading Entry1 Entry2 Browser View Test1Test2 Test3Test4 Browser View Heading Entry1Entry2

REVIEW: HTML tables Code My Schedule Period Class 1st Web Design 2nd Social Studies Lunch 3rd English table border align center cell padding cell spacing table header column span Browser View