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.

Join us on Telegram
Build Your Own Excel Clone HTML and CSS Tutorial.jpg
Read AlsoCreate Event Keycodes Using HTML, CSS, and JavaScript.jpgCreate Event Keycodes Using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

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).
Read Alsodarkmode.pngCreate a Dark/Light Mode Switch with HTML, CSS and Jquery

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
Read Alsohow to create a color palette generator using html, css and javascript.jpgHow to Create a Color Palette Generator using HTML, CSS and JavaScript

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 😊

Tags: excel clone, html, css, spreadsheet design, web development, data visualization, front-end development, source code, css grids, html and css spreadsheet tutorial, building excel-like grid with html and css, web-based excel clone, spreadsheet ui design, data tables in html and css
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺