How to make Table in HTML – To insert a table into your HTML document, use the <table> element. The <tr> tag divides a table into rows which are further divided into data cells using the <td> tag. <tr> is an abbreviation for table row while td stands for table data. Below is an example of html code that displays a table with headers and a few records.
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
How to Add a Border in html table?
table, th, td {
border: 1px solid black;
}
How to Collapsed Borders in html table?
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
How to add Cell Padding in html table?
th, td {
padding: 15px;
}
How to Left-align Headings in html table?
th {
text-align: left;
}
How to Add Border Spacing in html table?
table {
border-spacing: 5px;
}
How to add Cell that Span Many Columns in html table?
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
How to add Cell that Span Many Rows in html table?
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
How to add Add a Caption in html table?
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Formatting HTML tables?
There are two attributes that you can use to adjust the whitespace in a table for an enhanced appearance. These are namely, cellspacing and cellpadding. Use the cellpadding attribute to adjust the whitespace between the boarder of a cell and its content. Cellspacing adjusts whitespaces between table cells. Below is an example that demonstrates the cellspacing and cellpadding attributes.
Spanning is a feature that is similar to cell merge in excel. It allows you to extend a column or a row over other datacells. Use the colspan and the rowspan attributes to span rows and columns as shown in the example below.
