Styling Tables using CSS in WordPress Theme

Tables consist of rows and columns which can be useful to represent statistics and some other data’s.Unfortunately Many WordPress themes(Both Premium and Free Themes) doesn’t provide nice Default Table design,but good news is you can easily modify that by adding some CSS codes in your theme’s style.css file.

Open your Themes Style.css file which will be located in  /wp-content/theme/your-theme-name/style.css

table {
background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ddd;
margin:auto;
  }

 table thead, table tfoot { background: #f5f5f5; }
 table thead tr th,
 table tfoot tr th,
 table tbody tr td,
 table tr td,
 table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; }
 table thead tr th,
 table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
 table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
 table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }

	  table tbody tr.even,
	  table tbody tr.alt { background: #f9f9f9; }
	  table tbody tr:nth-child(even) { background: #f9f9f9; }
	  table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }

The above code will generate Table like below,You can learn more about Styling Tables using CSS here also W3Schools have Excellent tutorial about Styling CSS Tables.