CSS-Tables

Styling Tables using CSS in WordPress Theme

by Dan

CSS-Tables

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.

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany

Related Posts