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.
Table of Contents
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:
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
