Scribd
Upload
6 views

Computer Programming Lesson 3 Table Tag 1

HTML tables allow arranging data into rows and columns. Each table cell is defined by <td> tags, while each row uses <tr> tags. Sometimes <th> tags are used for table headers. CSS can be used to add borders and control padding/spacing. The border, width, and height properties adjust appearances. Percentage widths make cells proportional to their parent element (usually body).

Uploaded by

Carlos Ernacio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Computer Programming Lesson 3 Table Tag 1

HTML tables allow arranging data into rows and columns. Each table cell is defined by <td> tags, while each row uses <tr> tags. Sometimes <th> tags are used for table headers. CSS can be used to add borders and control padding/spacing. The border, width, and height properties adjust appearances. Percentage widths make cells proportional to their parent element (usually body).

Uploaded by

Carlos Ernacio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

The HTML Table Tag

HTML Tables
HTML Tables

•HTML tables allow web developers to


arrange data into rows and columns.
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro commercial Francisco Chang Mexico
Moctezuma

Ernst Handel Roland Mendel Austria


Define an HTML Table

• A table in HTML consists


of table cells inside rows
and columns.
Table Cells
• Each table cell is defined
by a <td> and a </td> tag.
• td stands for table data.
• Everything between <td> and </td>
are the content of the table cell.
Table Rows
• Each table row starts with
a <tr> and
ends with a </tr> tag.
• tr stands for table row.
Table Headers
• Sometimes you want your cells
to be table header cells.
In those cases use the
<th> tag instead of the <td> tag

• th stands for table header.


HTML Table border
How to Add a Border
•To add a border, use the CSS border property on
table, th, and td elements:
Collapsed Table Borders
• To avoid having double borders like in the example above, set the
CSS border-collapse property to collapse.
• This will make the borders collapse into a single border:
More on table coding
Table sizes
• HTML tables can have different sizes for each column,
row or the entire table.
Table sizes
• Use the style attribute with the width or height properties to
specify the size of a table, row or column.
HTML TABLE WIDTH

• To set the width of a table,


add the style attribute to
the <table> element:
• Using a percentage as the size
unit for a width means how
wide will this element be compared
to its parent element,
which in this case is the <body>
element.
HTML Table
Column Width
• To set the size of a specific column,
add the style attribute on
a <th> or <td> element:
HTML Table
Column Width
HTML Table Padding &
Spacing
HTML Table Padding & Spacing

• HTML tables can adjust the padding inside


the cells, and also the space between the
cells.
HTML Table - Cell Padding

•Cell padding is the space between the


cell edges and the cell content.
•By default the padding is set to 0.
HTML Table - Cell Padding
•To add padding on table cells, use the CSS
padding property:
HTML Table - Cell Padding
HTML Table - Cell Padding
HTML Table - Cell Spacing

•Cell spacing is the space between each cell.


•By default the space is set to 2 pixels.
HTML Table - Cell Spacing

• To change the space between table cells, use the CSS


border-spacing property on the table element:
End of Topic

You might also like