< BACK TO COMPONENTS

Create a Microsoft Excel Spreadsheet Clone with HTML and CSS | Source Code Included

Faraz

By Faraz -

Learn how to build your own Microsoft Excel spreadsheet clone using HTML and CSS. Explore step-by-step instructions and code examples to create a functional spreadsheet in this hands-on DIY tutorial.


Build Your Own Excel Clone HTML and CSS Tutorial.jpg

In this tutorial, we'll guide you through the process of creating a Microsoft Excel spreadsheet clone using the power of HTML and CSS. Whether you're a budding web developer or a seasoned pro, this step-by-step guide will help you master the art of web-based data visualization.


Let's clone Excel step by step using HTML and CSS.


Join my Telegram channel to download the project source code: Click Here


Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To kick things off, let's establish the foundation by setting up the HTML structure. Follow these steps:


  • Create a container div for the spreadsheet.
  • Set up rows and columns using HTML elements.

Let's break down the code:


1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5, in this case).


2. <html lang="en">: The root element of the HTML document. The lang attribute specifies the language of the document (English).


3. <head>: Contains meta-information about the HTML document, such as character set, viewport settings, title, and linked stylesheets.


  • <meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use the latest rendering engine.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design.
  • <title>MS Excel Clone</title>: Sets the title of the web page.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet named "styles.css" to the HTML document.

4. <body>: Contains the content of the HTML document that will be displayed in the browser.


  • <div class="main-content">: The main container for the entire content.
  • <div class="title">Book1 - Excel</div>: Represents the title of the Excel-like application.
  • <div class="menu-bar">: Contains a menu bar with various menu items.
  • Several <div> elements with <span> elements inside represent different menu options like File, Home, Insert, etc.
  • <div class="icon-bar">: Contains different sets of icons grouped under specific categories like Clipboard, Font, Alignment, Number, Styles, and Cells.
  • Each set contains various icons (<div class="icon">) representing different functionalities, such as paste, cut, copy, font settings, alignment, number format, styles, and cell operations.
  • <div class="cell-content">: Contains a section with "fx" and an empty <div>.
  • <div class="cells">: Represents the grid of cells in the Excel-like application.
  • <div> and <input> elements create a grid of cells with letters for columns (A, B, C, ...) and numbers for rows (1, 2, 3, ...).
  • Several <input class="cells__input"/> elements: Represent individual cells in the grid.
  • <input class="input__explanation" value="Part of the CSS Grid Collection πŸ‘‰πŸ»"/>: Represents an input field with an explanation.
  • <div class="input__see-more">: Contains a link to an external source (a CodePen collection).
  • <div class="input__sm-1">, <div class="input__sm-2">, <div class="input__sm-3">: Contain links to social media profiles (Twitter, GitHub, Dribbble).

Step 2 (CSS Code):

Now, let's make your spreadsheet visually appealing with CSS. Here's how:


  • Apply basic styling to the container and cells.
  • Use CSS grid for layout management.

Let's go through each section of the CSS code and understand what each part does:


1. * selector with box-sizing: border-box;:


  • This sets the box-sizing property to border-box for all elements. It means that padding and border values will be included in the element's total width and height.

2. body selector:


  • Defines styles for the entire document body.
  • Set the background color to white (#fff).
  • Specifies the font family as "Noto Sans" and a generic sans-serif as a fallback.
  • Sets the text color to a dark gray (#444).
  • Sets the font size to 14 pixels.

3. aside.context selector:


  • Targets an <aside> element with class "context."
  • Align text in the center.
  • Sets text color to a slightly darker gray (#333).
  • Defines a line height of 1.7 for better readability.

4. aside.context a selector:


  • Targets anchor (<a>) elements within the "context" aside.
  • Removes text decoration (underlines).
  • Sets text color to a darker gray (#333).
  • Adds padding above and below the anchor text and creates a bottom border with a dashed line.

5. aside.context a:hover selector:


  • Applies styles when hovering over the anchor links.
  • Change the bottom border to a solid line.

6. aside.context .explanation selector:


  • Target elements with class "explanation" within the "context" aside.
  • Sets a maximum width of 700 pixels.
  • Centers the element horizontally (margin: 0 auto).
  • Adds top margin of 6em.

7. footer selector:


  • Styles for the footer of the document.
  • Centers text horizontally.
  • Adds top and bottom margin of 4em.
  • Sets the width to 100%.

8. footer a selector:


  • Styles anchor links within the footer.
  • Removes text decoration.
  • Creates circular buttons with a border, white background, and dark gray text.
  • Adds some spacing around the buttons.

9. footer a:hover selector:


  • Applies styles when hovering over the footer buttons.
  • Changes the background to a slightly transparent white.

10. footer a .icons selector:


  • Styles an icon element within the footer buttons.
  • Adds margin to vertically center the icon.
  • Sets the font size to 20 pixels.

11. .main-content selector:


  • Targets the main content section of the page.
  • Applies a grid layout with specified rows and heights.
  • Uses min-height: 100vh to ensure that the content occupies at least the full viewport height.
  • Sets max-width to 100%.

12. .main-content > div selector:


  • Targets immediate child div elements within the main content.
  • Sets max-width to 100% for these child divs.

13. .title selector:


  • Styles for a title section, possibly a header.
  • Sets a green background color (#217346).
  • Align text in the center both horizontally and vertically.
  • Text color is white.

14. .menu-bar selector:


  • Defines styles for a menu bar.
  • Uses a grid layout with 10 columns, each containing max-content width.
  • Adds padding, grid gap, and a light gray background.

15. .menu-bar div:nth-child(2) span selector:


  • Styles a specific span within the second child div of the menu bar.
  • Creates an underline effect with a green color (#217346).
  • Sets font weight to 700.

16. .cell-content selector:


  • Styles for a cell content section, possibly within a grid.
  • Sets a light gray background and border.
  • Uses a grid layout with two columns, the first being 50px wide and the second occupying the remaining space.

17. .cells selector:


  • Styles for a cells section, part of a grid-based layout.
  • Uses a grid layout with multiple columns and rows.
  • Sets a background color and defines spacing.

18. .cells__spacer, .cells__alphabet, .cells__number, .cells__input selectors:


  • Styles for specific components within the cells section.
  • Adds background colors, alignments, and specific styling for input elements.

19. .icon-bar selector:


  • Styles for an icon bar.
  • Sets a light gray background with a subtle box shadow.
  • Defines a grid layout with specific columns and rows.

20. .icon-bar > div selector:


  • Styles for child divs within the icon bar.
  • Uses a grid layout with rows and a border on the right side.

21. .icon-bar__clipboard, .icon-bar__font, .icon-bar__alignment, .icon-bar__number, .icon-bar__styles, .icon-bar__cells selectors:


  • Styles for various sections within the icon bar, each with specific grid layouts, paddings, and alignments.

22. .icon-bar__clipboard .icon-paste .icon, .icon-bar__font .icon-bold, .icon-bar__alignment .icon-alignt, .icon-bar__number .icon-acc, etc. selectors:


  • Styles for individual icons within their respective sections.
  • Specifies background positions for sprite images.

23. .icon-bar__font select, .icon-bar__number select selectors:


  • Styles for dropdown selects within the font and number sections.
  • Adjust the height and font family.

24. .icon-bar__styles .conditional .icon, .icon-bar__styles .format-table .icon, .icon-bar__styles .cell-style .icon selectors:


  • Styles for icons within the styles section.
  • Specifies background positions for sprite images.

25. .icon-bar__cells .cell-insert .icon, .icon-bar__cells .cell-delete .icon, .icon-bar__cells .cell-format .icon selectors:


  • Styles for icons within the cells section.
  • Specifies background positions for sprite images.
* {
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Noto Sans", sans-serif;
  color: #444;
  font-size: 14px;
}

aside.context {
  text-align: center;
  color: #333;
  line-height: 1.7;
}
aside.context a {
  text-decoration: none;
  color: #333;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context a:hover {
  border-bottom: 1px solid;
}
aside.context .explanation {
  max-width: 700px;
  margin: 6em auto 0;
}

footer {
  text-align: center;
  margin: 4em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #333;
  color: #333;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

.main-content {
  display: grid;
  min-height: 100vh;
  grid-template-rows: repeat(2, 45px) 115px 60px auto;
  max-width: 100%;
}
.main-content > div {
  max-width: 100%;
}

.title {
  background: #217346;
  text-align: center;
  display: grid;
  place-content: center;
  color: #fff;
}

.menu-bar {
  display: grid;
  grid-template-columns: repeat(10, max-content);
  padding: 15px;
  grid-gap: 30px;
  background: #f3f2f1;
}
.menu-bar div:nth-child(2) span {
  display: inline-block;
  position: relative;
  border-bottom: 5px solid #217346;
  padding-bottom: 6px;
  font-weight: 700;
}

.cell-content {
  border: 1px solid #e6e6e6;
  background: #e6e6e6;
  display: grid;
  padding: 10px;
  grid-template-columns: 50px auto;
}
.cell-content div {
  border: 1px solid #cdcdcd;
  background: #fff;
  display: flex;
  align-items: center;
}
.cell-content div:nth-child(1) {
  justify-content: center;
  color: #999;
  font: italic 700 18px "Merriweather", serif;
  border-right: none;
}

.cells {
  position: relative;
  display: grid;
  grid-template-columns: 40px repeat(11, calc((100% - 50px) / 11));
  grid-template-rows: repeat(21, 25px);
  grid-gap: 1px;
  background: #cdcdcd;
  grid-auto-flow: dense;
  max-width: 100%;
  overflow: hidden;
}
.cells__spacer {
  background: #e6e6e6;
  position: relative;
}
.cells__spacer:after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  height: 80%;
  width: 100%;
  background: linear-gradient(135deg, transparent 30px, #bbb 30px, #bbb 55px, transparent 55px);
}
.cells__alphabet {
  background: #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cells__number {
  background: #e6e6e6;
  grid-column: 1/span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cells__input {
  border: none;
  padding: 0 6px;
}
.cells input, .cells button {
  border: none;
  background: #fff;
  padding: 0 6px;
  font-family: "Noto Sans", sans-serif;
}

.input__explanation {
  grid-column: 3/span 2;
  grid-row: 15;
}
.input__see-more {
  grid-column: 5;
  grid-row: 15;
  text-align: left;
  padding: 6px;
  background: #fff;
}
.input__sm-1, .input__sm-2, .input__sm-3 {
  text-align: center;
  padding: 6px;
  grid-row: 15;
  background: #fff;
}
.input__sm-1 {
  grid-column: 8;
}
.input__sm-2 {
  grid-column: 9;
}
.input__sm-3 {
  grid-column: 10;
}

.icon-bar {
  background: #f3f2f1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  display: grid;
  padding: 10px 15px;
  grid-template-columns: repeat(6, max-content);
  grid-template-rows: auto 35px;
  grid-auto-flow: dense;
}
.icon-bar > div {
  display: grid;
  grid-template-rows: repeat(2, 30px) 30px;
  border-right: 1px solid #cdcdcd;
  grid-gap: 5px;
}
.icon-bar__name {
  font-size: 12px;
  text-align: center;
  align-self: end;
  margin-bottom: 3px;
}
.icon-bar .icon-desc {
  margin-top: 5px;
  line-height: 1.15;
  font-size: 13px;
}
.icon-bar .icon {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/spriteExcel.png);
}

.icon-bar__clipboard {
  grid-template-columns: 50px 30px;
  padding-right: 10px;
}
.icon-bar__clipboard .icon-bar__name {
  grid-column: 1/span 2;
}
.icon-bar__clipboard .icon-paste {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-row: 1/span 2;
}
.icon-bar__clipboard .icon-paste .icon {
  background-position: -30px -60px;
  height: 45px;
  width: 100%;
}
.icon-bar__clipboard .icon-paste span {
  margin-top: 5px;
  display: block;
}
.icon-bar__clipboard .icon-cut {
  background-position: 0 0;
}
.icon-bar__clipboard .icon-copy {
  background-position: -30px 0;
}

.icon-bar__font {
  padding: 0 10px;
  grid-template-columns: repeat(3, 30px) 40px repeat(2, 30px);
  justify-content: space-around;
}
.icon-bar__font .icon-bar__name {
  grid-column: 1/span 5;
}
.icon-bar__font select {
  height: 25px;
}
.icon-bar__font select:nth-child(1) {
  grid-column: 1/span 4;
}
.icon-bar__font select:nth-child(1) option {
  font-family: var(--font);
}
.icon-bar__font select:nth-child(2) {
  margin-left: -6px;
  grid-column: 5/span 2;
}
.icon-bar__font .icon-bold {
  background-position: -30px -150px;
}
.icon-bar__font .icon-italic {
  background-position: -60px -150px;
}
.icon-bar__font .icon-underline {
  background-position: -90px -150px;
  border-right: 1px solid #cdcdcd;
  margin-right: -2px;
}
.icon-bar__font .icon-border {
  background-position: -60px 0;
  margin: 0 5px;
}
.icon-bar__font .icon-fill {
  background-position: -90px 0;
  border-left: 1px solid #cdcdcd;
  margin-left: -2px;
}
.icon-bar__font .icon-color {
  background-position: -120px 0;
}

.icon-bar__alignment {
  padding: 0 10px;
  grid-template-columns: repeat(5, 30px) 160px;
}
.icon-bar__alignment .icon-bar__name {
  grid-column: 1/span 6;
}
.icon-bar__alignment .icon-alignt {
  background-position: -150px 0;
}
.icon-bar__alignment .icon-alignm {
  background-position: -180px 0;
}
.icon-bar__alignment .icon-alignb {
  background-position: -210px 0;
}
.icon-bar__alignment .icon-orientation {
  background-position: -240px 0;
  border-left: 1px solid #cdcdcd;
}
.icon-bar__alignment .icon-alignl {
  background-position: 0 -30px;
  grid-column: 1;
}
.icon-bar__alignment .icon-alignc {
  background-position: -30px -30px;
}
.icon-bar__alignment .icon-alignr {
  background-position: -60px -30px;
}
.icon-bar__alignment .icon-indentinc {
  background-position: -90px -30px;
  border-left: 1px solid #cdcdcd;
}
.icon-bar__alignment .icon-indentdec {
  background-position: -120px -30px;
}
.icon-bar__alignment .wrap-text, .icon-bar__alignment .merge-center {
  grid-column: 6;
  border-left: 1px solid #cdcdcd;
  padding-left: 5px;
  display: flex;
  align-items: center;
}
.icon-bar__alignment .wrap-text .icon, .icon-bar__alignment .merge-center .icon {
  width: 30px;
  height: 30px;
}
.icon-bar__alignment .wrap-text span, .icon-bar__alignment .merge-center span {
  display: block;
  padding-left: 5px;
}
.icon-bar__alignment .wrap-text {
  grid-row: 1;
}
.icon-bar__alignment .wrap-text .icon {
  background-position: -270px 0;
}
.icon-bar__alignment .merge-center .icon {
  background-position: -150px -30px;
}

.icon-bar__number {
  grid-template-columns: repeat(5, 30px);
  padding: 0 10px;
}
.icon-bar__number select {
  grid-column: span 5;
  height: 25px;
}
.icon-bar__number .icon-acc {
  background-position: -180px -30px;
}
.icon-bar__number .icon-percent {
  background-position: -210px -30px;
}
.icon-bar__number .icon-comma {
  background-position: -240px -30px;
}
.icon-bar__number .icon-decimalinc {
  background-position: -270px -30px;
  border-left: 1px solid #cdcdcd;
}
.icon-bar__number .icon-decimaldec {
  background-position: 0 -60px;
}
.icon-bar__number .icon-bar__name {
  grid-column: span 5;
}

.icon-bar__styles {
  grid-template-columns: 80px 70px 60px;
  padding: 0 10px;
  text-align: center;
}
.icon-bar__styles .icon-bar__name {
  grid-column: span 3;
}
.icon-bar__styles .icon {
  width: 45px;
  height: 45px;
  margin: -8px auto 5px;
}
.icon-bar__styles .conditional .icon {
  background-position: -75px -60px;
}
.icon-bar__styles .format-table .icon {
  background-position: -120px -60px;
}
.icon-bar__styles .cell-style .icon {
  background-position: -165px -60px;
}

.icon-bar__cells {
  grid-template-columns: repeat(3, 50px);
  padding: 0 10px;
  text-align: center;
}
.icon-bar__cells .icon-bar__name {
  grid-column: span 3;
}
.icon-bar__cells .icon {
  width: 45px;
  height: 45px;
  margin: -8px auto 5px;
}
.icon-bar__cells .cell-insert .icon {
  background-position: -210px -60px;
}
.icon-bar__cells .cell-delete .icon {
  background-position: -255px -60px;
}
.icon-bar__cells .cell-format .icon {
  background-position: -30px -105px;
} 

Final Output:

Build Your Own Excel Clone HTML and CSS Tutorial.gif

Conclusion:

Congratulations! You've successfully created a Microsoft Excel spreadsheet clone using HTML and CSS. Experiment with additional features and continue refining your web development skills.


Remember, simplicity and responsiveness are key to a user-friendly experience. Happy coding!


Code by: Olivia Ng

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below πŸ”₯ and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox


Related Post