Menu icon Foundation
Tables

I'm delving into tables and have followed the example. Unfortunately the table is sitting to the left of my screen. I was just wondering if it needs to go inside a row/column to be centered in the screen? Does the table need to be wrapped in anything? Or can my content be:

    <div class="row">
        <div class="small-12 medium-8 small-centered columns">
      		<div class="row">
        		<div class="medium-2 columns">
          			<label for="" class="right inline">Title:</label>
        		</div>
        		<div class="medium-10 columns">
          			<input type="text" id="" placeholder="Title">
       			</div>
      		</div>
        </div>
    </div>
    
    <table>
      <thead>
    	<tr>
	      	<th>Title</th>
	      	<th>Thumb</th>
	      	<th>Desc</th>
    	</tr>
  	</thead>
  	<tbody>
	    	<tr>
		      	<td>info</td>
		      	<td>info</td>
		      	<td>info</td>
	    	</tr>
  	</tbody>
</table>
            

         

tables

I'm delving into tables and have followed the example. Unfortunately the table is sitting to the left of my screen. I was just wondering if it needs to go inside a row/column to be centered in the screen? Does the table need to be wrapped in anything? Or can my content be:

    <div class="row">
        <div class="small-12 medium-8 small-centered columns">
      		<div class="row">
        		<div class="medium-2 columns">
          			<label for="" class="right inline">Title:</label>
        		</div>
        		<div class="medium-10 columns">
          			<input type="text" id="" placeholder="Title">
       			</div>
      		</div>
        </div>
    </div>
    
    <table>
      <thead>
    	<tr>
	      	<th>Title</th>
	      	<th>Thumb</th>
	      	<th>Desc</th>
    	</tr>
  	</thead>
  	<tbody>
	    	<tr>
		      	<td>info</td>
		      	<td>info</td>
		      	<td>info</td>
	    	</tr>
  	</tbody>
</table>
            

         
Panthro over 5 years ago

I've added this:

<div class="row">
<div class="small-12 small-centered columns">
//my table

The table still is not centered, and it no longer breaks down on mobile.

How can I do this?

Rafi Benkual over 5 years ago

You will want to add all your form and table into the column structure to help line them up. This is one way to do it: http://cdpn.io/aInBx

Otherwise you content will span the full width of the screen and lack gutters (margin).