I What is
new?
Information Sheet 7.6
HTML TABLES
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table. Each table row is defined with a <tr>
tag. Each table header is defined with a <th> tag. Each table data/cell is defined with
a <td> tag. By default, the text in <th> elements are bold and centered. By default,
the text in <td> elements are regular and left-aligned.
The <td> elements are the data containers of the table. They can contain all
sorts of HTML elements; text, images, lists, other tables, etc.
Example Code: Expected Output on the Browser
Table Parts
1
Page
TVL – Computer Programming (G11) Edison e. Feranil
HTML Table - Add a Border
To add a border to a table, use the CSS border property:
HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-collapse
property:
HTML Table - Add Cell Padding
Cell padding specifies the space between the cell content and its borders. If
you do not specify a padding, the table cells will be displayed without padding. To set
the padding, use the CSS padding property:
HTML Table - Cell that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Example:
2
Page
TVL – Computer Programming (G11) Edison e. Feranil
Output on the Browser of Column Span:
HTML Table - Cell that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Example:
Output on the browser of Row Span:
3
Page
TVL – Computer Programming (G11) Edison e. Feranil
Graphical Comparison between colspan and rowspan in HTML Tables:
HTML Table - Add a Caption
To add a caption to a table, use the <caption> tag. The <caption> tag must
be inserted immediately after the <table> tag.
Example:
This is tha caption of the table
4
Page
TVL – Computer Programming (G11) Edison e. Feranil
