menu
table

Table Generator

Output any number of rows and columns, with placeholder content and styling.

tune
Options

share

Layout

Rows

table_rows
16

Columns

view_week
3

Vertical Cell Padding

padding
4px
keyboard_arrow_down

Horizontal Cell Padding

padding
0px
keyboard_arrow_down

table Width

width
420px
keyboard_arrow_down

Text Align

format_align_left
format_align_center
format_align_right
format_align_justify

Borders

Border Rounding

line_curve
25px
keyboard_arrow_down

Border Width

border_all
1px
keyboard_arrow_down

Border Style:

Collapse Border

Colors

Text

Background

Border

Header Text

Header Background

{tune}
expand_content

Click on any cell’s contents to edit.

integration_instructions
Code Snippets

expand_less
HTML & CSS

    <!-- CSS: Place in the document's head. -->
  <style>

  .tableContainer{
    overflow: hidden;
    border: 1px undefined #000000;
    border-radius: 25px;
    width: 420px;
  }
  
  table.GeneratedTable {
    background-color: #F1F1F1;
    border-collapse: collapse;
    border: 1px undefined #000000;
    color: #000000;
    padding: 4px 0px;
    text-align: center;
  }
  
  table.GeneratedTable td, table.GeneratedTable th {
    border: 1px undefined #000000;
    padding: 4px 0px;
    width: 140px;
    text-align: center; 
  }
  
  table.GeneratedTable thead {
    background-color: #663399;
    color: #ffffff
  }
  </style>
  
  <!-- HTML: Place in the document's body where your table should appear. --> 
    
  <div class="tableContainer" >
   <table class="GeneratedTable" >
     <thead>
         <tr>
           <th>header 1</th>
           <th>header 2</th>
           <th>header 3</th>
         </tr>
     </thead>
     <tbody>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
         <tr>
           <td>Cell</td>
           <td>Cell</td>
           <td>Cell</td>
        </tr>
     </tbody>
   </table>
 </div>
{integration_instructions}

school
Go Deeper

expand_less
{school}