When adding a table in the editor it appears with 1px black borders, and opening the cell properties shows Color #000000 and Width 1px. However nothing has been added to the contents to achieve this - it is a function of the underlying CSS for the editor, specifically .ql-editor td. When you get the contents or the html from the editor, there is no cell color or width set, and thus if it is displayed without the editor stylesheet (i.e. viewing the HTML) then there is no border.
Instead, the same border attributes that are set when the cell properties are changed need to be initially set when the table is created so that the cell properties and the content attributes always line up.
As an example, both of the following look the same in the editor, but the second displays borders in a viewer while the first does not.
Creating a 1x1 table returns (getContents(), getSemanticHTML()):
When adding a table in the editor it appears with 1px black borders, and opening the cell properties shows Color #000000 and Width 1px. However nothing has been added to the contents to achieve this - it is a function of the underlying CSS for the editor, specifically
.ql-editor td. When you get the contents or the html from the editor, there is no cell color or width set, and thus if it is displayed without the editor stylesheet (i.e. viewing the HTML) then there is no border.Instead, the same border attributes that are set when the cell properties are changed need to be initially set when the table is created so that the cell properties and the content attributes always line up.
As an example, both of the following look the same in the editor, but the second displays borders in a viewer while the first does not.
Creating a 1x1 table returns (getContents(), getSemanticHTML()):
{"ops":[{"attributes":{"table-temporary":{"data-class":"ql-table-better"}},"insert":"\n"},{"attributes":{"table-cell-block":"cell-opf2","table-cell":{"data-row":"row-fep7","width":"72"}},"insert":"\n"},{"insert":"\n"}]}<table class="ql-table-better"><temporary class="ql-table-temporary" data-class="ql-table-better"></temporary><tbody><tr><td data-row="row-fep7" width="72" class="ql-cell-focused"><p class="ql-table-block" data-cell="cell-opf2"><br></p></td></tr></tbody></table><p></p>Using cell properties to force a border (by changing color to red then back to black, and width to 2 then back to 1):
{"ops":[{"attributes":{"table-temporary":{"data-class":"ql-table-better"}},"insert":"\n"},{"attributes":{"table-cell-block":"cell-opf2","table-cell":{"data-row":"row-fep7","width":"72","style":"border-color: #000000; border-width: 1px; "}},"insert":"\n"},{"insert":"\n"}]}<table class="ql-table-better"><temporary class="ql-table-temporary" data-class="ql-table-better"></temporary><tbody><tr><td data-row="row-fep7" width="72" style="border-color: #000000; border-width: 1px; " class="ql-cell-focused"><p class="ql-table-block" data-cell="cell-opf2"><br></p></td></tr></tbody></table><p></p>