1. HTML <table> width Attribute
The width attribute specifies the width of a table.
If the width attribute is not set, a table takes up the space it needs to display the table data.
Example:
<table width="400">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Note :
The width attribute of <table> is not supported in HTML5. Use CSS instead.
CSS syntax: <table style="width:400px">
2. HTML <td>or <tr> height Attribute
The height attribute specifies the height of a cell.
Normally, a cell takes up the space it needs to display the content.
The height attribute is used to set a predefined height of a cell.
Example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td height="100">January</td>
<td height="100">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td height="100">January</td>
<td height="100">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Attribute Values
Value | Description |
---|---|
pixels | Sets the height in pixels (example: height="50") |
% | Sets the height in percent of the surrounding element (example: height="50%") |
Note :
The height attribute of <table> is not supported in HTML5. Use CSS instead.
CSS syntax: <table style="height:400px">
3. HTML <table> margin Attribute
The CSS margin
properties are used to create space around elements, outside of any defined borders.
All CSS Margin Properties
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |
Example:
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
or
margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
4. CSS text-align Property
The
text-align
property specifies the horizontal alignment of text in an element.Value | Description | |
---|---|---|
left | Aligns the text to the left | |
right | Aligns the text to the right | |
center | Centers the text | |
justify | Stretches the lines so that each line has equal width (like in newspapers and magazines) |
5.CSS border-collapse Property:
border-collapse
property sets whether table borders should collapse into a single border or be separated as in standard HTML.border-collapse: collapse;
6. CSS border Property:
to set table border widths.
7.Vertical Alignment
The
vertical-align
property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
vertical-align: bottom;
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Merge Cells:
No comments:
Post a Comment