Very clear HTML5 table

<h1>David Kern HTML5 Table</h1> <table> <thead> <tr> <th rowspan="1" colspan="2">Article</th> <th rowspan="2" colspan="2">Table</th> <th rowspan="1" colspan="2">Article</th> <th rowspan="2" colspan="2">Table</th> </tr> <tr> <th rowspan="2">Section</th> <th rowspan="2">Section</th> <th rowspan="2">Section</th> <th rowspan="2">Section</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); body { background: #fb887c; color: #fff; font-family: 'Lato', Arial, sans-serif; } h1 { font-family: "proxima-nova",sans-serif; letter-spacing: -0.01em; font-weight: 700; font-style: normal; font-size: 60px; margin-left: -3px; line-height: 1em; color: #fff; text-align: center; margin-bottom: 8px; text-rendering: optimizeLegibility; } table { width: 80%; margin: auto; } table, th, td { border: 1px solid #fff; border-collapse: collapse; } th, td { padding: 15px; }

This is an example for the design of a HTML5 table using HTML and CSS. The background color of the page has been set to the value of #fb887c using the background class, font color is set as #fff and font family is set to 'Lato', Arial, sans-serif. The title of the table is designed with the element h1 and with the styles of font family as "proxima-nova", sans-serif, letter spacing as -0.01em, font weight as 700 and font style as normal. The HTML element row span has been used to merge rows for a given element; such as setting the rowspan value to 2 will merge two rows together for a given element. The border of the table and the cells has been set the style value of border 1px solid #fff and border-collapse as collapse. The thickness of the border is 1px. The table headers and the table data cells have its padding as 15px. credits - https://codepen.io/DavidKern/pen/PwzYvv

Very clear HTML5 table

Post Comment or Questions Cancel reply