Step 1. Add 'Embed code' element

On the left, grab the 'Embed Code' element and drop it into your site, the location where you want your table to appear.

---

Step 2. Add HTML code

Within the 'Embed Code' that you just added, add the HTML code below:

​​<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Box 1</td>
    <td>Box 2</td>
    <td>Box 3</td>
  </tr>
  <tr>
    <td>Box 4</td>
    <td>Box 5</td>
    <td>Box 6</td>
  </tr>
</table>

---

Step 3. Open Weebly's HTML/CSS Editor

At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.

---

Step 4. Add CSS codes

On the left under 'STYLES', click on 'main.less' (or 'main-styles.css' for older Weebly themes), and on the right, add the following CSS codes:

Note: Instructions for styling the table reside next to the given CSS code in orange.

/* Table */
​table {
  border:1px solid #ddd; /* Perimeter color */
  border-collapse:collapse;
  max-width: 500px; /* Table width */
  width:100%;
  margin:0 auto; /* Table alignment */
  min-height: 300px; /* Table height */
  height:100%;
  font-family: 'Montserrat'; /* Table font */
  text-align:center; /* Table data alignment */
}
tr {
  border-bottom:1px solid #ddd; /* Table row border */
}
tr:first-child {
  background:#ebeef2; /* First row background color */
  color: #009bff; /* First row text color */
  font-weight:bold; /* First row text thickness */
}
tr:first-child td:first-child {
  background:#f6f7f9; /* Top-left box background color */
  color:#000; /* Top-left box text color */
}
tr:last-child {
  border-bottom:none;
}
td {
  border-right:1px solid #ddd; /* Table data border */
  padding:1em; /* Space between text and border */
  box-sizing:border-box;
  white-space:nowrap;
}
td:first-child {
  background:#ebeef2; /* First column background color */
}
td:last-child {
  border-right:none;
}

​Click save.

---

Step 5. Add more rows

Okay, we're back in the Weebly Editor and have our basic 3x3 table setup.

​Now, let's say we want to add 1 additional row to the bottom of the table. To do this, simply click on the table and add the following HTML code to the code from step 1 as shown below in orange:

Note: Repeat this process for as many rows as you'd like.

​<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Box 1</td>
    <td>Box 2</td>
    <td>Box 3</td>
  </tr>
  <tr>
    <td>Box 4</td>
    <td>Box 5</td>
    <td>Box 6</td>
  </tr>
  <tr>
    <td>Box 7</td>
    <td>Box 8</td>
    <td>Box 9</td>
  </tr>
</table>

---

Step 6. Add more columns

Let's say we want to add an additional column to the right side of the table. ​To do this, simply click on the table and add the following HTML codes to the code from step 5 as shown below in orange:

Note: Repeat this process for as many columns as you'd like.

​<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Box 1</td>
    <td>Box 2</td>
    <td>Box 3</td>
    <td>Box 3.5</td>
  </tr>
  <tr>
    <td>Box 4</td>
    <td>Box 5</td>
    <td>Box 6</td>
    <td>Box 6.5</td>
  </tr>
  <tr>
    <td>Box 7</td>
    <td>Box 8</td>
    <td>Box 9</td>
    <td>Box 9.5</td>
  </tr>
</table>

---

You're done! Publish your site to see your new table!

---

comments powered by Disqus