Formatting a table in css like excel #7543
Description
1. Problem
Manipulating a table in css can be tricky if you have a lot of information, you need a class or id in most cases
2. Solution
A solution would be to manipulate the table element of the html according to the position of the content like excel does. This can be done with a pseudoselector I call a data-to-table sorter.
2.1 before.html
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>2.2 after.html
<!DOCTYPE html>
<html>
<head>
<style>
a1:a5, b1:b5, c1:c5 {
background: blue;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>2.3 concept
StartPosition:EndPosition {
property: value;
}2.4 syntax
a1: a5, b1:b5, c1:c5{
property: value;
}
2.5 sample
2.5.1 sample1_after.html
2.5.2 sample2_before.html
2.6 sample
2.6.1 sample1.csv
Company,Contact,Country
Alfreds Futterkiste,Maria Anders,Germany
Centro comercial Moctezuma,Francisco Chang,Mexico
Ernst Handel,Roland Mendel,Austria
Island Trading,Helen Bennett,UK
Laughing Bacchus Winecellars,Yoshi Tannamuri,Canada
Magazzini Alimentari Riuniti,Giovanni Rovelli,Italy
2.6.2 sample2.csv
Company,Contact,Country
a1, b1,c1,
a1,b1,c1
a1,b1,c1
a1,b1,c1
a1,b1,c1
a1,b1,c1
2.6 concept.png
2.7 why?
- don’t need id, class
- "is fast", "easy"
- easy and didactic to handle
- look like something you know, something excel in css
- is limited by the amount of content
- If you need to convert an excel document to web format, an interesting alternative would be in my opinion … convert to html with the style in css, what I’m talking about here … is to have a syntax similar to excel to style the table which facilitates web excel formats with css-excel-stylish style
3. Reference
- https://discourse.wicg.io/t/draft-idea-spec-proposal-formatting-a-table-in-css-like-excel/5868
- https://www.w3schools.com/EXCEL/index.php
- https://www.extendoffice.com/documents/excel/3593-excel-convert-cells-to-html-table.html
- https://www.excel-easy.com/
- http://dmcritchie.mvps.org/excel/xl2html.htm
- https://www.youtube.com/watch?v=eT-ZCIb2wqE
- https://www.w3schools.com/EXCEL/index.php
- https://www.w3schools.com/