Scribd
Upload
13 views

HTML Tables

Uploaded by

seannfuentes
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

HTML Tables

Uploaded by

seannfuentes
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like