How To Create HTML Tables

Table Structure General HTML code for a Web Table: table cells table cells

Table Structure ElementTagRequired?Description Table … Yes Creates a Table. Contains all other table elements Table Caption … No Adds a caption or title, appears above the table default Table Row … YesContains all data for a table row Table Header … No Normally describes cells in the top row or left column By default, text in cell will appear bold and centered Table Data … YesDescribes table cell contents. By default, text is left-justified

Table Structure  The dimension of a Web site is defined by the number of rows and the number of cells within the rows.  There is no HTML element to mark a table column.  Tables are considered block-level elements. (appear on a new line on the Web page)

CSS Properties for Tables PropertyDescriptionValues BorderStyle of the border-border width (e.g., 1px) Border-collapseCollapses borders of adjacent cells into a single border instead of separating them -collapse Border-spacingAmount of space between the borders of adjacent cells-Number of pixels PaddingAmount of space between cell data and the cell border-Number of pixels

CSS Properties for Tables PropertyDescriptionValues WidthHow far the table or cell will extend horizontally across the page -Number of pixels -% of the browse window Background-colorBackground color of table elements -Color name -Hexadecimal code Text-alignAligns text horizontally-left, center, right, justify Vertical-alignAligns content vertically-top, bottom, middle

Spanning Rows and Columns  Spanning Cell: a single cell occupies more than one row or one column in the table. Spanning cells are created by inserting a rowspan or colspan attribute into a or tag. …. “value”: the number of rows or columns that you want the table cell to cover Example: data cell that spans two columns and three rows, in the tag is: …..

Spanning Rows and Columns  It is important to remember that when a cell spans multiple rows or columns, you must adjust the number of cells used elsewhere in the table.  For column-spanning cells, reduce the number of cells in the current row.

Eagles Landing High School TeacherClassGrade