Scribd
Upload
39 views

HTML Table

The document describes the basic structure and styling of HTML tables. It defines the <table>, <tr>, <th>, and <td> tags used to create tables and explains how to add borders, padding, cells that span rows/columns, and captions to tables. Examples are provided with the <table> tag and relevant attributes like border, border-collapse, colspan, rowspan, and style.

Uploaded by

Twelve Forty-four
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

HTML Table

The document describes the basic structure and styling of HTML tables. It defines the <table>, <tr>, <th>, and <td> tags used to create tables and explains how to add borders, padding, cells that span rows/columns, and captions to tables. Examples are provided with the <table> tag and relevant attributes like border, border-collapse, colspan, rowspan, and style.

Uploaded by

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

HTML Table

An HTML table is defined with the <table> tag.


Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are
bold and centered. A table data/cell is defined with the <td> tag.
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:
<html> </tr>
<body> <tr>
<td>Grace</td>
<h2>Basic HTML Table</h2> <td>Mary</td>
<td>21</td>
<table style="width:100%"> </tr>
<tr> <tr>
<th>Firstname</th> <td>Thomas</td>
<th>Lastname</th> <td>David</td>
<th>Age</th> <td>28</td>
</tr> </tr>
<tr> </table>
<td>John</td>
<td>Peter</td> </body>
<td>30</td> </html>
Output:

HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without borders.
Example:
<html>
<head> <tr>
<style> <td>John</td> <tr>
table, th, td { <td>Peter</td> <td>Thomas</td>
border: 1px solid black; <td>30</td> <td>David</td>
} </tr> <td>28</td>
</style> <tr> </tr>
</head> <td>Grace</td> </table>
<body> <td>Mary</td>
<td>21</td> </body>
<h2>Bordered Table</h2> </tr> </html>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
Output:
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property:
Example:
<html> <td>John</td>
<head> <td>Peter</td>
<style> <td>30</td>
table, th, td { </tr>
border: 1px solid black; <tr>
border-collapse: collapse; <td>Grace</td>
} <td>Mary</td>
</style> <td>21</td>
</head> </tr>
<body> <tr>
<td>Thomas</td>
<h2>Collapsed Borders</h2> <td>David</td>
<td>28</td>
<table style="width:100%"> </tr>
<tr> </table>
<th>Firstname</th>
<th>Lastname</th> </body>
<th>Age</th> </html>
</tr>
<tr>
Output:

HTML Table - Adding 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.
Example:
<html> <tr>
<head> <td>John</td>
<style> <td>Peter</td>
table, th, td { <td>30</td>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>Grace</td>
th, td { <td>Mary</td>
padding: 5px; <td>21</td>
</style> </tr>
</head> <tr>
<body> <td>Thomas</td>
<td>David</td>
<h2>Collapsed Borders</h2> <td>28</td>
</tr>
<table style="width:100%"> </table>
<tr>
<th>Firstname</th> </body>
<th>Lastname</th> </html>
<th>Age</th>
</tr>
Output:

HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
Example:
<html> <th rowspan="2">Telephone:</th>
<head> <td>87000</td>
<style> </tr>
table, th, td { <tr>
border: 1px solid black; <td>87000</td>
border-collapse: collapse; </tr>
} </table>
th, td {
padding: 5px; </body>
text-align: left; </html>
}
</style>
</head>
<body>

Output:

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan
attribute: <table style="width:100%">
Example: <tr>
<html> <th>Name</th>
<head> <th colspan="2">Hotline</th>
<style> </tr>
table, th, td { <tr>
border: 1px solid black; <td>Jollibee</td>
border-collapse: collapse; <td>87000</td>
} <td>87000</td>
th, td { </tr>
padding: 5px; </table>
text-align: left;
} </body>
</style> </html>
</head>
<body>

<h2>Cell that spans two rows</h2>

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Jollibee</td>
</tr>
<tr>
Output:

HTML Table - Adding a Caption


To add a caption to a table, use the <caption> tag: <table style="width:100%">
Example: <caption>Monthly savings</caption>
<html> <tr>
<head> <th>Month</th>
<style> <th>Savings</th>
table, th, td { </tr>
border: 1px solid black; <tr>
border-collapse: collapse; <td>September</td>
} <td>P10000.00</td>
th, td { </tr>
padding: 5px; <tr>
text-align: left; <td>October</td>
} <td>P10000.00</td>
</style> </tr>
</head> </table>
<body>
</body>
<h2>Table Caption</h2> </html>

Output:

You might also like