Tables










































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>



Attribute Values

ValueDescription
pixelsSets 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

PropertyDescription
marginA shorthand property for setting the margin properties in one declaration
margin-bottomSets the bottom margin of an element
margin-leftSets the left margin of an element
margin-rightSets the right margin of an element
margin-topSets the top margin of an element

Example:


margin-top: 100px;
    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.


ValueDescription
leftAligns the text to the left
rightAligns the text to the right
centerCenters the text
justifyStretches the lines so that each line has equal width (like in newspapers and magazines)


5.CSS border-collapse Property:


The 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.






border:solid 5px;







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;



FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300



Merge Cells:
















No comments:

Post a Comment