Income Statement

Overview


Sample Income Statement


Form with a Border





<div style="border:solid;border-width:1px;border-color:lightgrey;border-radius:10px;min-height:200px;padding:10px;">



</div>


The above HTML is rendered as follows:



NOte the following style choices

  • border
  • padding
Try it!

Add rows


The next step is to create the two columns 


<div style="display:flex;flex-direction:row;">
  <div style="flex:1;">Revenues</div>
  <div style="width:100px;">100</div>
</div>


Revenues
100
Try it!

Add Dividers





<div style="height:1px;background-color:lightgrey;"></div>


Full Form


The following demonstrates the elements of a full income statement. 


<div style="border:solid;border-width:1px;border-color:lightgrey;border-radius:10px;min-height:200px;padding:10px;">
  <div style="display:flex;flex-direction:row;">
    <div style="flex:1;">Revenues</div>
    <div style="width:100px;">100</div>
  </div>

  <div style="display:flex;flex-direction:row;">
    <div style="flex:1;">Cost of Goods Sold</div>
    <div style="width:100px;">30</div>
  </div>

  <div style="height:1px;background-color:lightgrey;"></div>

  <div style="display:flex;flex-direction:row;">
    <div style="flex:1;">Gross Profit</div>
    <div style="width:100px;">70</div>
  </div>

</div>


which looks like the following when rendered:

Revenues
100
Cost of Goods Sold
30
Gross Profit
70
Try it!

Other Enhancements






<div style="display:flex;flex-direction:row;">
  <div style="font-weight:bold;padding-left:20px;flex:1;">Gross Profit</div>
  <div style="width:100px;">70</div>
</div>


which looks like the following when rendered:

Revenues
100
Cost of Goods Sold
30
Gross Profit
70

Contents