[Draft Idea/Spec/Proposal] Formatting a table in css like excel

raphaellouis · 2022-05-09

Hi all!

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

Solution

A solution would be to manipulate the table element of the html according to the position of the content like excel does

sample: index.html

<!DOCTYPE html>
<html>
<head>
<style>
a1:a2 {
  background: red;
}

a3: a5 {
  background: blue;
}

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>

syntax

sample1: concept

StartPosition:EndPosition {
 property: value;
}

sample 2: styles.css

a1: a2{
 property: value;
}

benefits

don’t need id, class
is fast
easy and didactic to handle
look like something you know
is limited by the amount of content

raphaellouis · 2022-05-14

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