- June 5, 2017
- Posted by: Vikas
- Category: Uncategorized
Today I am showing you a tip to redesign your HTML table element that will be compatible with HTML4 and HTML5.
Let me put some scenario about writing this post. I was validating my code with W3C validator tool and I found some errors like: The cellspacing attribute on the table element is obsolete. Use CSS instead. Absolutely, my code was written for HTML4 and I simply replaced DOCTYPE to HTML5 specification. Normally we write HTML code for table as follows:
[code:html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Research lab</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="10%" class="grid">
<thead>
<tr>
<th style="width:30%">test head</th>
<th style="width:70%">Test headheadheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<td>Testing</td>
<td>Testing<br/>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td>Testing<br/>Testing</td>
</tr>
</tbody>
</table>
</body>
</html>[/code]
Note: grid class contains some minor css attributes like font color and background colors etc.
My goal was to remove cellspacing, border, cellpadding and width attributes and move them to CSS class.
So the first question came in my mind, what are the alternatives for cellspacing and cellpadding attributes? Little googling gave me some idea, and that was enough for me to redesign my current table grid class. I am listing some of the issues and its solutions.
Problem: Table cell width does not work when we get big single word
Solution: Is can be solved by two css attributes: word-wrap and table-layout
Problem: Alternatives to width attribute of table
Solution: width can be used in css class, but for table, best practice it to give 100% width and when you want to override it for some case, use style attribute.
Problem: Alternative of table border attribute of table:
Solution: We can use css border attribute of css, as shown in example
Problem: Alternative of cellpadding attribute of table
Solution: We can use padding attribute of css.
Problem: Alternative of valign attribute of table
Solution: We can use vertical-align attribute of table
Problem: Alternative of cellspacing attribute of table and/or cell
Solution: We can use border-collapse and border-spacing attributes as show in example
Problem: Alternative of align attribute of table
Solution: We can use margin: 0 auto; in table css class (Not included in example)
Example:
[code:html]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Research lab</title>
<!–<link type="text/css" href="/test/test.css" rel="stylesheet" media="all">–>
<style type="text/css">
table.normal{
table-layout:fixed;
width:100%;
border:solid 1px #000000;
padding:0;
border-collapse:collapse;
border-spacing:0;
}
table.normal th{
border:solid 1px #000000;
word-wrap:break-word;
}
table.normal td{
border:solid 1px #000000;
vertical-align:top;
word-wrap:break-word;
}
</style>
</head>
<body>
<table class="normal" style="width:10%">
<thead>
<tr>
<th style="width:30%">test head</th>
<th style="width:70%">Test headheadheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<td>Testing</td>
<td>Testing<br/>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td>Testing<br/>Testing</td>
</tr>
</tbody>
</table>
</body>
</html>[/code]